vue.js底层的原理

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

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

 Object.defineProperty(obj,obj.attr,descriptor)
参数：
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？
configurable： 决定了对象的key是否可删除
enumerable： 决定了对象是否可遍历（枚举）
writeable: 决定了对象的key的value是否可修改
存储器：
get函数 ----起了个名字getter
设置当前对象的key的初始值
set函数 ----起了个名字setter
修改当前对象的key的值
代码：
Vue.set(vm.list,'num',1000)
console.log(vm)
var obj = {
name:'呵呵'
}
Object.defineProperty(obj,'name',{
//存储器
get(){
//要求必须有返回值
return '哈哈'
},
set(value){ //value就是修改后的对象的key的value
console.log('set')
console.log(value);
document.querySelector('#app').innerHTML = value
}

二、双向数据绑定

1. 效果
   数据改 ， 视图更
   视图改， 数据更
   2. 实现
   使用v-model实现
   3. 缺点
   v-model默认绑定value属性， 所以v-model只能在表单使用
   4. 原理
   1. 为什么数据能直接在视图显示
   v-model默认绑定了DOM对象的value属性， 当它初次绑定的时候，
   就会触发getter,watcher就会触发， watcher通知Vue生成新的VDOM树，
   再通过render函数进行渲染,生成真实DOM
   2. 为什么视图修改数据就会修改
   当视图修改是， 意味着DOM的value属性值改变，就会触发setter,watcher监听机制就会执行
   watcher通知Vue生成新的VDOM树，再通过render函数进行渲染,生成真实DOM
   代码：

    ```
   <div id="app">
   <input type="text" v-model = "msg">
   </div>
   <script>
   new Vue({
   el: '#app',
   data: {
   msg: 'hello vue.js'
   }
   })
   </script>
   ```
   

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

两种用法：

1. key的value值是一个函数
```javascript
new Vue({
watch: {
key(value,oldvalue){}
}
})
```
2. key的value值是一个对象
```javascript
new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){}
// 监听的处理函数
}
}
})
```

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

代码：

```
<div id="app">
{{ msg }}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
watch: {
msg(){
alert('数据改变了')
}
}
})
</script>
```

最后

以上就是魁梧水池为你收集整理的vue.js底层的原理的全部内容，希望文章能够帮你解决vue.js底层的原理所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。