计算属性computed
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
所以,对于任何复杂逻辑,你都应当使用计算属性
代码案例:
<body>
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model='name'>
<input type="text" v-model='age'>
<h1>{{name}} 是 {{age >=18 ? "成年人" : "未成年人"}}</h1>
<h1>{{age|myshow(1,2,3,name)}}</h1>
// 以上两种模板会使你的模板繁杂,难以维护,那么就可以使用计算属性,把代码放在js中
<h2>{{personType}}</h2>
</div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
Vue.filter('myshow',function (val,a,b,c,d) {
// val 对应的是age的值
// a - 1; b - 2; c - 3; d - name;
console.log(arguments)
return d +' 是 ' + (val >= 18 ? "成年人" : '未成年人')
})
let vm = new Vue({
el:'#app',
data:{
name:"小明",
age:0
},
computed: {
personType(){
1.除了过滤器 中的this不是当前实例 其他的你见到的函数中的this都是当前实例;
2.函数中的this 就是当前实例
3.计算属性的特点 就是 只要依赖不发生改变,这个函数就不会执行;
依赖 ===》 就是你在这个函数中使用的 this上的属性,必须是同步使用,异步属性更改,函数并不会执行
// setTimeout(() => {
// console.log(this.name)
// }, 10);
4.computed中的属性最终也是被挂在到了当前的实例上了,给的值不是函数体 而是函数的返回结果
5.data methods computed 这里边的属性 都会被挂在到实例上 (props)
console.log(this.name)
return this.age >= 18 ? "成年人" : '未成年人'
}
},
});
</script>
计算属性 vs 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖(this指定的属性)进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着在上面的案例中只要 name还没有发生改变,多次访问 personType计算属性会立即返回之前的计算结果,而不必再次执行函数。
监听属性watch
当你有一些数据需要随着其它数据变动而变动时,就可以使用watch
代码案例:
<body>
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model='firstName'>
<input type="text" v-model='middleName'>
<input type="text" v-model='lastName'>
<h2>这个人的全名是{{fullName}}</h2>
<h2>这个人的全名是{{fullName2}}</h2>
</div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"小明",
firstName:'',
middleName:'',
lastName:'',
fullName2:'',
obj:{
a:123
}
},
computed: {
fullName(){
return this.firstName + '-' + this.middleName + '-'+this.lastName
},
// name(){
// return this.firstName
// }
},
watch: {
这里边放的都是已经存在的属性名
就是 监听这个属性的变化 ,这要属性发生改变 这里边对应的函数就会执行
watch 可以编写异步操作;异步数据更改也会使函数执行
firstName(newV,oldV){
console.log(arguments);
setTimeout(() => {
this.fullName2 = newV + '-' + this.middleName + '-'+this.lastName
}, 1000);
},
middleName(newV){
this.fullName2 = this.firstName + '-' + newV + '-'+this.lastName
},
lastName(newV){
this.fullName2 = this.firstName + '-' + this.middleName + '-'+newV
},
fullName(){
console.log(666)
},
obj: {
监听一个对象时,对象里的内容更改,并不会出发监听事件,
只有obj这个变量对应的值改变的时候 才会触发这个函数,
而deep可以解决这个问题,设置为true时,就可以监听对象里的属性变化
deep:true,//深度监听
immediate:true,// 刚进来时 先执行一次handler回调函数,就是说数据还没有变化之前先执行一次监听的方法
handler(newV,oldV){
深度监听一个对象的时候 这两个形参对应的都是新值;
console.log(newV,oldV)
}
}
}
},
});
</script>