把computed中的方法当做属性使用,会返回一个数据供使用:
new Vue({
el:"",//关联界面元素
data:{},//vm的数据源
methods:{},//方法
filters:{qq(){}},//过滤器
computed:{xx(){}} //xx就是一个计算属性
})
//属性没有先后顺序
第一种用法：当做函数使用
<div id='app'>
<p>计算结果computed----{{age}}p>
<button @click="change">点击计算button>
<p>计算结果metheds----{{msg}}岁p>
div>
<script>
new Vue({
el:'#app',
data: {
birth:"1999-11-10",
msg:0
},
methods: {
change(){
this.msg= new Date().getFullYear()-new Date(this.birth).getFullYear()
return this.msg
}
},
computed:{
age(){
var number=new Date().getFullYear()-new Date(this.birth).getFullYear()
//将this.birth缓存起来，当this.birth修改后才会重新调用age函数
return number+"岁"
},
}
})
script>
第二种用法：属性用法
<div id='app'>
<p>{{age2}}p>
<button @click="change">点击计算button>
<p>计算结果metheds----{{msg}}岁p>
div>
<script>
new Vue({
el:'#app',
data: {
birth:"1999-11-10",
msg:0
},
methods: {
change(){
this.msg= new Date().getFullYear()-new Date(this.birth).getFullYear()
return this.msg
}
},
computed:{
age2:{
get(){
// return "取值"
return "出生日期"+this.birth
},//取值
set(){
return "存值"
}//存值
}
}
})
script>
计算属性和方法的区别:(面试)
计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算，提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用
补充:关于计算属性 函数什么情况下调用
//计算属性使用时当做属性使用
//计算属性设计时当做函数设计(就像es6中的属性)
//当计算属性的函数中使用到的data中的数据发生变化时,计算属性就会重新执行并刷新UI
//1.如果是修改了data中监听的某个的属性值 计算属性就会运行
//2.如果是修改了data中监听的某个属性值内部的数据,计算属性就不会重新运行
//比如:计算属性使用的是data中的一个数组,某个交互把数组内部的某个下标的值改了,但是这个数组没有改变,就不会触发计算属性
//3.解决2的办法1:把修改后的数组重新赋值给data,让引用发生变化,来触发计算属性
//3.解决2的办法2:赋值 JSON.parse(JSON.stringfy(data))