VUE官网：https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{ a }} 11 </div> 12 <script> 13 var data = { a : 1 }; 14 var vm = new Vue({ 15 el : '#app', 16 data : data //右边的data是第13行的data 17 }); 18 //data.a = "hi~!"; //修改的是第13行的声明的变量data的属性，视图进行了重新渲染 19 </script> 20 </body> 21 </html>
预览效果：
说明：
体验一下 Vue 的响应式。高亮处为新增的代码。改变data的a属性，视图会被重新渲染。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 {{ a }} 11 </div> 12 <script> 13 var data = { a : 1 }; 14 var vm = new Vue({ 15 el : '#app', 16 data : data //右边的data是第13行的data 17 }); 18 data.a = "hi~!"; //修改的是第13行的声明的变量data的属性a的值，视图进行了重新渲染 19 </script> 20 </body> 21 </html>
视图被重新渲染了：
说明：
语句 data.a = "hi~!"； 是改变了第13行声明的变量 data 的属性 a 的值。
用 vm 来保存了 Vue 的实现，如果用 vm 去改变 a 属性，效果是跟用 data.a = "hi~!"；语句改变是一样的。vm.a 等同于 data.a。
即将上面的语句 data.a = "hi~!"；更改为 vm.a = "hi~!"；效果也是一样的。
修改 vm.a ，data.a 同时改变。修改 data.a , vm.a 同时改变。
使用 Object.freeze() 之后，响应系统无法再追踪变化。
点击按钮之前：
点击按钮之后：
使用 Object.freeze() 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ a }}
<button v-on:click=" a='goodbye' ">按钮</button>
</div>
<script>
var data = { a : 'hi' };
Object.freeze( data );
var vm = new Vue({
el : '#app',
data : data
});
</script>
</body>
</html>
点击按钮之前：
点击按钮之后：
使用前缀 $ 可以暴露 vue 示例的 property。
$watch 方法可以观察一个变量的变化，会纪录变量变化后的值与变化前的值。在变量变化后调用 $watch 方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> {{ a }} </div> <script> var obj = { a : 'hi' }; var vm = new Vue({ el : '#app', data : obj }); vm.$watch('a', function(newVal, oldVal){ console.log(newVal, oldVal); }) vm.$data.a = "test"; </script> </body> </html>
控制台输出：
test hi