【Vue】vue两个核心功能声明式渲染_响应式
1、简介
- Vue.js 是一个渐进式JavaScript框架,用于构建用户界面。
- 它以其易用性、灵活性和高效性而闻名。
- Vue 的两个核心功能是声明式渲染和响应式系统,这两个功能共同为开发者提供了强大的工具来构建动态且响应式的Web应用。
2、声明式渲染
2.1简介
- 声明式渲染 是 Vue.js 的一个核心特性,它允许开发者以声明的方式将 DOM 绑定到底层 Vue 实例的数据上。
- 这意味着可以通过 Vue 的模板语法来描述视图应该长什么样,而不是直接操作 DOM 来更新视图。
- Vue 会自动监测数据的变化,并在数据变化时重新渲染 DOM,以保持视图和数据之间的同步。
2.2示例
假设有一个 Vue 实例,其数据对象中有一个名为 message
的属性。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在 HTML 中,可以使用 Vue 的模板语法来声明式地渲染这个 message
:
<div id="app">
{{ message }}
</div>
当 message
的值变化时,Vue 会自动更新 DOM 以反映新的值,而无需手动编写任何 DOM 更新代码。
3、响应式
3.1简介
- 响应式系统 是 Vue.js 的另一个核心特性,它使得 Vue 能够自动追踪和响应数据的变化。
- Vue 通过使用 JavaScript 的 Object.defineProperty(在 Vue 3 中使用 Proxy)来实现这一功能。
- 当 Vue 实例被创建时,它会遍历
data
选项中的所有属性,并使用Object.defineProperty
将它们转换为 getter/setter。这样,Vue 就能追踪到每个属性的访问和修改。 - 当数据被访问时,getter 会被调用,Vue 会记录下这个依赖(通常是一个组件的渲染函数或计算属性)。当数据被修改时,setter 会被调用,Vue 会通知所有依赖这个数据的组件重新渲染。
3.2示例
假设有一个 Vue 实例,并且修改了 message
的值:
vm.message = 'New message!';
由于 message
是响应式的,Vue 会知道 message
的值已经改变,并自动触发更新过程,重新渲染所有依赖 message
的视图部分。
原文地址:https://blog.csdn.net/wosixiaokeai/article/details/140651826
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!