Vue底层原理

最新推荐文章于 2025-07-24 09:06:00 发布

原创最新推荐文章于 2025-07-24 09:06:00 发布 · 558 阅读

CC 4.0 BY-SA版权

本文深入探讨Vue的响应式原理，通过Object.defineProperty实现数据监听，当数据变化时触发视图更新。同时，介绍了Vue的双向数据绑定机制v-model，分析其工作原理，包括getter和setter的角色。此外，还讨论了watch监听器的使用，以及对比了watch与computed的区别。

深入响应式原理：

当视图模型（VM）中的数据模型（M）发生改变时，视图（V）就会进行更新
Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变，就会触发，然后wather就会触发，告诉视图（V）进行重新渲染
数据必须放在data选项中才能进行深入响应式

数据模型–> vm中的data选项
状态管理
什么叫做状态？什么叫做状态管理？
我们使用一个数据去管理视图中的一个部分，那么这条数据就叫做状态，这种管理模式就叫做状态管理

Object.defineProperty(obj,obj.attr,descriptor)

参数：
obj:要在其上定义属性的对象。

prop:要定义或修改的属性的名称。

descriptor:将被定义或修改的属性描述符。
它是一个对象，这个对象有哪些构成？
1.configurable：决定了对象的key是否可删除

2.enumerable：决定了对象是否可遍历（枚举）

3.writeable: 决定了对象的key的value是否可修改

存储器：
get函数 ----起了个名字getter 设置当前对象的key的初始值
set函数 ----起了个名字setter 修改当前对象的key的值

总结： 
    1. 什么是深入响应式原理？
      深入响应式原理是利用了数据劫持和订阅发布的模式, 当数据模型发生改变的时候，
      视图就会响应的进行更新， 那么深入响应式原理是利用es5的
      Object.defineProperty中个getter/setter来进行数据的劫持的

      名称解释： 
        数据劫持:Object.defineProperty中的getter/setter ，然后在执行watcher
        订阅发布：事件（自定义事件） 
          订阅： 事件的声明  vm.$on    
          发布： 事件的触发  vm.$emit

    2. 非响应式情况
      在vm模型的data外定义的属性， 就是非响应式属性， 非响应式属性，
      属性值更新， 视图不会更新
   
    3. 非响应式属性如何变成响应式属性
      思维： 将非响应式属性合并到响应式属性身上 
      解决： 利用了Vue提供的  Vue.set/this.$set(vm.dataattr,prop,value)
   
    4. Vue.set底层原生是什么？
      Object.assign(目标对象，对象1， 对象2，对象3)

底层原理：核心使用的是es5的方法,这个方法不支持ie8以下

双向数据绑定

效果:
数据改,视图更
视图改,数据更
实现方法:
v-model
缺点:
v-model默认绑定value属性，所以v-model只能在表单使用
原理:

⒈ 为什么数据能直接在视图显示
v-model默认绑定了DOM对象的value属性，当它初次绑定的时候，
就会触发getter,watcher就会触发，watcher通知Vue生成新的VDOM树，
再通过render函数进行渲染,生成真实DOM

⒉ 为什么视图修改数据就会修改
当视图修改是，意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行， watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM

//双向数据绑定
<div id="app">
<input type="text" v-model = "msg">
</div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
}
})

watch监听

//例子
<div id="app">
{{ msg }}
</div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
watch: {
msg(){
alert('数据改变了')
     }
    }
})

1.作用：
用来监听数据的变换，当数据模型（data选项 M）发生改变时， watch就会触发
2. 使用watch的两种用法：

⒈key的value值是一个函数

new Vue({
watch: {
key(value,oldvalue){}
}
})//基础方法

⒉key的value值是一个对象

new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})// 高明一些

watch中的key指的就是data选项中的key

用案例分析watch和computed的区别

需求：
当我写好姓和名，全称自动显示

1.watch方法:

html代码:

<body>
<div id="app">
<div>
姓： <input type="text" v-model = "firstName">
</div>
<div>
名： <input type="text" v-model = "lastName">
</div>
<div>
全称; <input type="text" v-model = "fullName">
</div>
</div>
</body>

js代码:

new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
firstName(val){
this.fullName = val + this.lastName
},
lastName(val){
this.fullName = this.firstName + val
},
fullName(val){
console.log( val )
this.firstName = val.slice(0,1)
this.lastName = val.slice(1)
}
}
})

2.computed方法:
html代码:

<body>
<div id="app">
<div>
姓： <input type="text" v-model = "firstName">
</div>
<div>
名： <input type="text" v-model = "lastName">
</div>
<div>
全称 <input type="text" v-model = "fullName">
</div>
</div>
</body>

js代码:

new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
fullName(){
return this.firstName + this.lastName
}
}
})

从上面代码可以看出computed方法比watch方法更简洁，易于使用。

computed:

有逻辑 2. 像变量一样使用

watch:

有异步操作 2. 开销较大