Vue数据响应原理
2019-03-02 本文已影响0人
码上行动
我们知道当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
