目录
3 `watch`、`computed`和`methods`之间的对比
1 监听属性 watch
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
firstName: function (newVal, oldVal) { // 第一个参数是新数据,第二个参数是旧数据
this.fullName = newVal + ' - ' + this.lastName;
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
// 另一种 watch 写法
vm.$watch('lastName',function(newVal, oldVal){
this.fullName = this.firstName + ' - ' + newVal;
});
深度监视:
data:{
user:{
name:'li',
age:12
}
}
watch:{
user:{
handler:(newVal,oldVal){
console.log(.....)
},
deep:true // 深度监视,当对象中的属性发生变化也会被监视
}
}
// 另一种 watch 写法
vm.$watch('user',function(newVal, oldVal){
.....
},true);
2 计算属性 computed
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="middlename"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname"> // 会变
// 会变
<p>{{ fullname }}</p>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
middlename: ''
},
methods: {},
computed: {
'fullname': function () {
console.log('ok')
return this.firstname + '-' + this.middlename + '-' + this.lastname
}
}
});
</script>
注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性去使用就好了;
注意2: 只要计算属性,这个 function 内部,所用到的任何 data 中的数据发送了变化,就会立即重新计算这个计算属性的值。
注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果计算属性方法中,所有来的任何数据,都没有发生过变化,则不会重新对计算属性求值。
定义有`getter`和`setter`的计算属性:
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 点击按钮重新为 计算属性 fullName 赋值 -->
<input type="button" value="修改fullName" @click="changeName">
<span>{{fullName}}</span>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {
changeName() {
this.fullName = 'TOM - chen2';
}
},
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
// 会将 firstname 和 lastname 也更新
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
</script>
2.1 计算属性传参方式-闭包
使用闭包的方式。
<tr v-for="(item,index) in arr" v-if="myfilter(index)">
<td>{{item.username}}</td>
<td>{{item.sex}}</td>
<td>{{item.grade}}</td>
<td>
<a href="#" @click="delClick(index)">删除</a>
</td>
</tr>
export default {
name: 'Achievement',
data () {
return {
...
}
},
methods: {
...
},
computed: {
myfilter() {
return function(index){
return this.arr[index].username.match(this.name)!==null;
}
}
}
}
3 `watch`、`computed`和`methods`之间的对比
1. `computed` 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
2. `methods` 方法表示一个具体的操作,主要书写业务逻辑;
3. `watch` 是一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是`computed`和`methods`的结合体;
4 其他属性与方法
//通过普通方式为对象添加属性时vue无法实时监视到
this.user.age=25;
//通过vue实例的$set方法为对象添加属性,可以实时监视
this.$set(this.user,'age',18);
// 另一种写法:
Vue.set(this.user,'age',22);
// 删除一个对象的某个属性
Vue.delete(this.user,'age');