效果图： Object.freeze(被阻止后续修改现有属性的变量) ； 变量.$watch('变量中的某个属性名',function(新值，旧值）{} ）， 该方法必须在定义新值前定义。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href=" "/> <style type="text/css"> * { margin: 0; padding: 0; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 数据渲染 DOM , 文本插值 --> <div id="app"> {{ a }} {{ b }} </div> <script type="text/javascript"> window.onload = function () { var dataInApp = { a : 1 , b : 2}; //Object.freeze(dataInApp); // 方法阻止dataInApp修改现有的属性, var app = new Vue({ el: '#app', // 哪个选择器使用 这个创建的vue对象 data : dataInApp }); //Object.freeze(app); // 方法阻止app修改现有的属性 dataInApp.b = 3; // 改变 b 的值 与 app.a = 'ha' 效果一致 app.a = 'ha'; app.$data.a = 'yo'; // $ 用于区分 vue的属性和用户定义的属性 console.log(app.$el); // watch方法可以用于观察 变量新值和旧值 必须在新值定义前定义 app.$watch('a',function(newVal,oldVal){ console.log(newVal,oldVal); }); app.$data.a='watch'; } </script> </body> </html>