-
了解object.defineProperty 实现响应式
-
清楚 observe/watcher/dep 具体指的是什么
-
了解 发布订阅模式 以及其解决的具体问题
-
在Javascript里实现数据响应式一般有俩种方案,分别对应着vue2.x 和 vue3.x使用的方式,他们分别
是:
- 对象属性拦截 (vue2.x) Object.defineProperty
- 对象整体代理 (vue3.x) Proxy
提示:以下是本篇文章正文内容,下面案例可供参考
- Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。在这个章节,我们将研究一下
Vue 响应式系统的底层的细节。
数据响应式:数据模型仅仅是普通的
JavaScript
对象,而当我们修改数据时,视图会进行更新,避免了频繁的DOM
操作,提高开发效率,这与Jquery
不一样,Jquery
是频繁的操作Dom
数据改变,视图改变,视图改变,数据也随之改变( 通过这句话,我们可以看到在双向绑定中是包含了数据响应式的内容)
我们可以使用
v-model
在表单元素上创建双向数据绑定
数据驱动是
Vue
最独特的特性之一
开发过程中仅仅需要关注数据本身,不需要关心数据是如何渲染到视图中的。主流的
MVVM
框架都已经实现了数据响应式与双向绑定,所以可以将数据绑定到DOM
上。
在vue.js中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。
那么vuejs是如何实现这种数据驱动的呢?
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通
Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用
Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让
Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定
将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析
{{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化
—>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
对vue-双向数据的分析?/v-model 双向数据绑定的原理
代码如下(示例):
function compine () {
// 通过document.querySelect(‘#app’).childNodes 获取app下所有的子元素
const nodes = document.querySelector(‘#app’).childNodes
// 输出一下这个值 当前这个值是一个层级嵌套的数组我们通过foreach
// console.log(nodes)
nodes.forEach(item => {
// 再输出一下item html:49 <input type="text" v-model="name"> 是一个input 输入框
// console.log(item)
// 筛选出当前是标签的 ,因为nodes这个输出会将空格以‘text’ nodeType为3,而标签nodetype是1,if判断筛选出是标签的
if (item.nodeType === 1){
const attrs = item.attributes
// console.log(attrs) {0: type, 1: v-model, type: type, v-model: v-model, length: 2} 返回了一个是数组
Array.from(attrs).forEach( arr => {
// console.log(arr) // texgt= ‘text’ v-mode: ‘name’ ,筛选出这个v-model
if (arr.nodeName === ‘v-model’){
item.value = data[arr.nodeValue]
item.addEventListener(‘input’,e => {
console.log(e.target.value)
//
data[arr.nodeValue] = e.target.value
})
}
})
}
})
}
//发布 阅读者模式优化