<script>
/**
* vm.$log() : 打印整个ViewModel的数据
vm.$log('item') 打印某个属性
*/
let vm = new Vue({
el : 'body',
data : {
msg : '123'
},
ready (){
// $nextTick : DOM更新后执行 this自动绑到实例
// 输出 '234'
this.$nextTick( ()=>c(2, this.msg) );
}
});
// 修改msg的值 $nextTick会在之后执行
vm.msg = '234';
// 当天节点的内容
c( vm.$el.textContent );
// nextTick的另外一种调用方式
// Vue.nextTick(函数) 这种方式不会把实例的this带进来
Vue.nextTick(()=>c(2, vm.msg));
</script>
// 页面里调用了5次 example 因为关闭了缓存 所以执行了5次 get
<div class="example">{{msg}}-{{example}}</div>
<div class="example">{{msg}}-{{example}}</div>
<div class="example">{{msg}}-{{example}}</div>
<div class="example">{{msg}}-{{example}}</div>
<div class="example">{{msg}}-{{example}}</div>
<script>
let vm = new Vue({
el : 'body',
data : {
msg : '123'
},
// 计算属性每次都会缓存结果 除非依赖改变 这里的依赖是this.msg
computed : {
example : {
// cache : 关闭缓存
// 关闭缓存后每次调用example参数都会调用get方法 不再使用缓存
// 关闭缓存后 只有在JS离会多次执行 页面模板种的DOM只有依赖改变时才更新
// 如果打开缓存 不管执行多少次 get方法都只执行一次
cache : false,
get (){
return new Date().getTime() + this.msg;
}
}
}
});
vm.msg = '234';
setTimeout(()=>{vm.msg='345'}, 1000);
</script>