计算属性:
定义:要用的属性不存在,要通过已有的属性计算得来(不能是变量)
原理:底层借助了Obejct.defaultProperty方法提供的getter和setter
get作用:当有人读取fullName时,get就会被调用,且返回值就作为fullName的值,底层用的Object.defaultProps
get什么时候调用:1、初次读取fullName时,2、所依赖的数据发生变化时
优势:与methods相比,内部有缓存机制(复用),效率更高,使用方便
set作用:当fullName被修改时
computed:{
fullName:{
get(){
console.log("get被调用了")
return this.firstName+'-'+this.lastName
},
//set作用:当fullName被修改时
set(val){
console.log("set被调用了")
console.log(val)
}
}
简写:当只有get没有set时,可以采用简写
fullName:function(){
console.log("get被调用了")
return this.firstName+'-'+this.lastName
}
再简写:
fullName(){
console.log("get被调用了")
return this.firstName+'-'+this.lastName
}
}
调用:
<div>
姓:<el-input type="text" v-model="firstName" placeholder=""></el-input><br/>
名:<el-input type="text" v-model="lastName" placeholder=""></el-input><br/>
全名:<span>{{ fullName }}</span> //注意调用的时候时fullName不是fullName(),因为fullName是属性,他的值是一个函数
</div>
方法:
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
},
**下面是上面的简写**
reversedMessage () {
return this.message.split('').reverse().join('')
},
}
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
监视属性watch
<div>a的值{{numbers.a}}</div>
<div @click="numbers.a++">点我让a+1</div>
data() {
return {
isHot:true,
numbers:{
a:1,
b:2
}
}
},
watch:{
isHot:{
//handler什么时候调用:ishot发生改变时
handler(newV,oldV){
},
immediate:true,//默认false,改为true,初始化时让handler执行
},
// 深度监视:
// 1、vue中的watch默认不监视对象内部值的变化
// 2、配置deep:true可以监视对象内部值改变
// 备注:
// 1、vue自身可以监测对象内部值的变化,但vue提供的watch默认不可以
// 2、使用watch时根据数据的具体结构,决定是否采用深度监视
"numbers.a":{//监视某一个属性,这个地方要加引号
handler(){
console.log("a变了")
}
},
"numbers":{//监视多级结构中,某个属性的变化
deep:true,
handler(){
console.log("a变了")
}
},
简写:当不需要deep,immediate,只需要handler时就可以使用简写
isHot(newV,oldV){
console.log(newV,oldV)
}
},
computed和watch区别:
1、computed能完成的watch都能完成
2、watch能完成的computed不一定能完成,例:watch可进行异步操作
当computed和watch都能实现,用computed,当涉及到异步时(setTimeout)只能用watch,因为computed有return,
重要原则:
1、被vue管理的函数,最好写成普通函数,这样this指向vm或组件实例对象
2、所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成尖头函数,这样this的指向才是vm或组件实例对象