1. computed:属性计算还可以是对象模式,但它不光有get还有set
computed的内容不管是函数还是对象都会代理到vue实例上,返回的是什么值就是什么
2. 属性计算可以是函数形式,但它只是get操作
3. Vue当中methods与computed之间的差异与区别
3-1. methods是主动调用的,执行次数是根据调用次数来决定的,显然性能比较弱,执行的时候需要加上()
{{ getFullName() }}
3-2. computed是被动的,在调用以后会缓存处理,执行的时候不需要加(),不管执行几次computed计算函数都只被调用一次
{{ fullName }}
3-3. 不管是methods还是computed,它们的来源都是es6当中的class,methods其实就是class当中的普通方法,而computed其实就是class中的get/set方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计算属性和监视</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="root">
姓:<input type="text" v-model="firstName" /> <br />
名:<input type="text" v-model="lastName" />
<br>
<!-- TODO:复杂的插值语法 -->
{{ firstName+"-"+lastName }}
<br>
<!-- TODO:函数调用也是expression表达式 -->
<!-- methods方法调用是主动调用的,主动触发时每一次都会触发这个函数 -->
{{ getFullName() }}
<br>
{{ getFullName() }}
<br>
<!-- TODO:computed计算属性的调用 -->
<!--
! 1.不需要加()的调用;
! 2.计算属性其实被缓存了,而且计算N次方法都只会执行一次,极大的提升了程序的性能
-->
{{ fullName }}
<br>
<button @click="changeFullName">changeFullName</button>
<!--
问题:Vue当中methods与computed之间的差异与区别
1.methods是主动调用的,执行次数是根据调用次数来决定的,显然性能比较弱,执行的时候需要加上();
2.computed是被动的,在调用以后会缓存处理,执行的时候不需要加(),不管执行几次computed计算函数都只被调用一次;
3.不管是methods还是computed,它们的来源都是es6当中的class,methods其实就是class当中的普通方法,而computed其实就是class中的get/set方法。
-->
</div>
<script>
Vue.config.productionTip = false;
let vm = new Vue({
el: '#root',
data: {
firstName: 'china',
lastName: 'vane',
},
// methods方法终将被代理到Vue实例上
methods:{
getFullName(){
console.log("getFullName的执行调用")
// methods中的函数里的this指向vue实例
// console.log(this) // Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
return(this.firstName+"-"+this.lastName)
},
changeFullName(){
this.fullName="li-si"
}
},
computed:{
// 属性计算还可以是对象模式,但它不光有get还有set
// fullname最终也会代理到vue实例上,返回的是什么值就是什么,不管是函数还是对象
fullName:{
get(){
console.log("get执行")
return this.firstName+"-"+this.lastName
},
set(val){
console.log("set执行",val)
let arr=val.split("-")
this.firstName=arr[0]
this.lastName=arr[1]
}
}
// 属性计算可以是函数形式,但它只是get操作
// fullName(){
// console.log("computed计算属性的调用")
// return(this.firstName+"-"+this.lastName)
// }
}
});
console.log(vm)
// vm.getFullName()
</script>
</body>
</html>