数据劫持
2020-10-08 本文已影响0人
lucky_yao
数据驱动视图：
1.监听指定的数据
2.指定的数据发生改变/被获取是触发指定的方法(set/get)
3.将新的数据 渲染到页面上去
新的问题：无法对新增的属性进行监听
在下面重新监听新的值
特别优待的数组（vue对数组的方法进行了重新封装，解决了该问题）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>x:{{obj.x}}</h1>
<h1>y:{{obj.y}}</h1>
<h2>{{arr}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
// let app = document.querySelector("h1");
// function render(){
// console.log("渲染开始");
// app.innerHTML = obj.x + "/ " + obj.y;
// }
// let obj = {
// x: 1
// }
// render();
// obj.x = 100;
// render();
// vue
//数据驱动视图：
// 1.监听指定的数据
// 2.指定的数据发生改变/被获取时触发指定的方法(set/get)
// 3.将新的数据 渲染到页面上去
// let $data = {x:1};
// Object.defineProperty(obj,'x',{
// set(newVal){
// $data.x = newVal;
// render();
// },
// get(){
// return $data.x;
// }
// });
// //问题： 无法对新增的属性进行监听
// Object.defineProperty(obj,'y',{
// set(newVal){
// $data.y = newVal;
// render();
// },
// get(){
// return $data.y;
// }
// });
//特别优待的数组（vue对数组的方法进行了重新封装，解决了该问题）
let app = new Vue({
el:"#app",
data: {
obj:{
x:1
},
arr:[1,2,3]
},
});
app.$set(app.obj.y);
</script>
</body>
</html>
