问题一，首先得问问什么是回调函数？
三大特性
· * 01，你定义的
* 02，你没有调用
* 03，但是最后执行了
问题二，什么是计算属性？
可以理解为一种较为复杂的数据模板。
问题三，存在data对象中的数据模板，为什莫还要计算属性呢？
因为data中的数据模板最初追求的是简洁，假如我们需要通过一些较为复杂的流程来生成我们的数据模板，那显然data中的数据模板不能支持这种需求，这就体现了计算属性的价值。
问题四，为什莫不可以用method来代替computed呢，我测试了效果是一样的啊？
这就牵扯到性能问题了，如若是用方法来代替computed，因为每次调用我们所需的数据模时，都会调用生成它的方法，不管此数据模板是否改变；然而computed计算属性存在缓存机制，且为依赖响应式缓存，也就是除了初始化执行的第一次，会调用其get函数，初始化缓存，之后只要其所依赖的数据【如data里的基本数据模板】没有发生改变，则每当调用计算属性时，不会触发get函数，而是直接从缓存中获取；只有当其所依赖的数据发生改变时，调用计算属性时，会触发get函数，并更新缓存。显然computed更加高效。
demo：computed vs 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性computed缓存</title>
</head>
<body>
<div id="app">
<p>addtion：{{ addtion }}</p>
<input type="button" @click="get_addtion()" value="addtion" />
<p>ordinary：{{ ordinary }}</p>
<input type="button" @click="get_ordinary()" value="ordinary" />
<p>way：{{ way() }}</p>
<input type="button" @click="get_way()" value="way" />
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
msg_add: 1,
msg_ordinary: 1,
msg_way: 1
},
computed: {
/**
* 实例Vue中的data对象中的属性和computed中的计算属性都是存在一个缓存
* 且此缓存为依赖响应式缓存：只有当其中内部依赖数据发生改变时，才会触发
* 其中的get函数，并更新缓存内容。
* 当上述属性值改变时，且需要在View层次更新数据，那会触发Vue实例所挂载
* 目标对象的重渲染re-render
*/
addtion: function() {
console.log("get_addtion");
return this.msg_add;
},
ordinary: function() {
console.log("get_ordinary");
return this.msg_ordinary;
}
},
methods: {
get_ordinary: function() {
console.log(this.ordinary);
},
get_addtion: function() {
this.msg_add++;
console.log(this.addtion)
},
get_way: function() {
this.way();
},
way: function() {
console.log("get_way");
return this.msg_way;
}
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
}
})
</script>
</html>
问题五，可不可以用watch代替computed的呢？
只要你想，就可以，但是相比之下推荐computed
demo： computed vs watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性computed&watch</title>
</head>
<body>
<div id="app">
姓：<input placeholder="firstName" v-model="firstName" /><br />
名：<input placeholder="lastName" v-model="lastName" /><br />
computed单向绑定：fullName:<input placeholder="C_fullName" v-model="Cget_fullName" /><br />
watch单向绑定：fullName:<input placeholder="W_fullName" v-model="W_fullName" /><br />
computed双向绑定：fullName:<input v-model="D_fullName" />
</div>
</body>
<script src="js/vue2.0.js"></script>
<script type="text/javascript">
/**
* 在实例vm中不使用箭头函数，因为箭头函数没有this绑定了父级function的上下文作用域
* 所以，如果使用箭头函数，则this指向的将不会是实例vm而是最终的window对象
*/
const vm = new Vue({
el: '#app',
data: {
firstName: "burning",
lastName: "Snow",
W_fullName: ""
},
//声明式开发-----只需要按照框架规范来写就好
computed: {
//仅读取[computed默认get函数]
Cget_fullName: function() {
return this.firstName + ' ' + this.lastName;
},
D_fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
//监听D_fullName值的变化
set(newValue) {
let res = newValue.split(' ');
this.firstName = res[0];
this.lastName = res[1];
}
}
},
//命令式开发-----我们要告诉它怎末做，对谁做，等等...
watch: {
//监听,当被监听的数据改变时,则触发此函数
firstName: function(newValue, oldValue) {
console.log(newValue);
console.log(oldValue);
this.W_fullName = newValue + '' + this.lastName;
}
}
})
//a.b.c表示的路径为vm中data属性a对象中的属性b对象中的c属性值
vm.$watch('lastName', function(newValue, oldValue) {
this.W_fullName = this.firstName + '' + newValue;
})
/**
* 什么是回调函数？
* 01，你定义的
* 02，你没有调用
* 03，但是最后执行了
*/
</script>
</html>
菜鸟爬行中…
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
