Vue数据响应原理

作者: 码上行动 | 来源:发表于2019-03-02 22:40 被阅读0次

前端面试题【Day02】
Vue的34道题
双向绑定
面试总结之基础(2)
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
VUE中数据响应式原理
vue系列--- vue响应式原理
Vue原理
Vue数据响应原理
Vue数据响应原理

我们知道当Vue data实例对象下的数据发生改变，视图会随之改变，那么它是遵循的什么底层原理呢？相信大家一定很好奇，那么接下来就让我们一探究竟吧~

<div id="app">
    <h1>title : {{title}}</h1>   //title : xx 视图随之更新
    <h1>url : {{url}}</h1>     //url : www.baidu.com
</div>
<script type="text/javascript">
    var data = { title: "百度", url: "www.baidu.com", }
    var app = new Vue({
        el: '#app',
        data: data
    })

    修改app  data实例对象下的title属性
    app.title= "xx"
    document.write(data.title )
</script>

如上图所示，在js中手动修改了data实例对象下title的值，视图会随之显示新值。

接下来我们用ES5当中的get和set演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">hello</div>
</body>
<script>

 var obj={
    name:"veb",
    get_name:function(){
        console.log("有人访问了name的值")
        return this.name;
    },
    set_name:function(val){
        console.log("有人修改了name的值")
        this.name=val;
     }
 }

 console.log(obj.get_name())
</script>

在控制台输入obj.get_name()可获取neme的值，输入obj.set_name(123)可修改neme的值 ,视图随set设置更新，可见vue数据响应原理（双向绑定原理）：给data中的属性添加set，依赖于ES5的defineproperty；

Vue.set()

Vue内置的set方法

官方解释是：设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

Vue.set(a,b,c)

a是要更改的数据

b是数据的第几项

c是更改后的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <li v-for="item in listData">{{item}}</li>
        </ul>
        <a href="" v-text="he" @click="changeData()"></a>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            he:"点我",
            listData:["a","b","c"]
          },
        methods:{
              changeData () {
                  Vue.set(this.listData,0,'X')
              }
            }
    })
</script>
</html>

效果如下：

1.png