<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>数组/对象更新检测</title>
</head>
<body>
<div class="app">
{{obj}}
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:'.app',
data:{
obj:{
"name":"李",
"age":'30',
},
arr:[1,2,3,4]
},
//数组的更新检测://
//vue提供了观察数组的变异方法,当以下方法调用时,视图会响应式更新
//push() pop()
//shift() unshift()
//splice() sort()
//reverse()
//数组还有一些非变异的方法,当使用这些(如:filter(), concat() 和 slice())方法时,可以用返回的新数组替换原有的旧数组
//对象的更改检测://
vm.obj.age=20;//dom更新(直接改值)
vm.obj.cat='小猫'//dom不更新,原始数值改变(新增)
//通过vm.$set是Vue.set的别名
Vue.set(vm.obj,'gender', "男");//1:dom更新,原始数值同时更新(新增)
vm.$set(vm.obj,'type','1')//2:dom更新,原始数值同时更新(新增)
//我们想利用vue的Object.assign()或者 _.extend()方法添加多个对象的属性,需要这样写(新增)
vm.obj = Object.assign({}, vm.obj, {
Color: 'Vue Green',
bg:'#000',
address:'广东',
name:'李特成'
})
});
</script>
</html>