vue计算属性和监听器
作者:互联网
-
模板里使用表达式
-
模板语法里使用表达式进行一些操作
<div id="app"> {{ message.split('').reverse().join('')}} </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue' } } }) </script>
-
如果表达式足够复杂,会很难处理,并且不够优美且很难理解
-
-
使用方法
-
调用方法代替表达式
<div id="app"> {{reversedMessage()}} </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue' } }, methods: { reversedMessage(){ return this.message.split('').reverse().join('') } }, }) </script>
-
每次渲染模板的时候都需要调用一次方法,并且不能触发缓存,比较浪费性能。所以引入基于响应式依赖进行缓存的计算属性。
-
-
使用计算属性
-
只在相关响应式依赖发生改变时它们才会重新求值
<div id="app"> {{reversedMessage}} </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue' } }, computed: { reversedMessage() { return this.message.split('').reverse().join('') } }, }) </script>
-
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue,oldValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }
-
-
使用监听器
-
普通方法:虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,一种更通用的方式来观察和响应
Vue
实例上的数据变动<div id="app"> <input type="text" v-model='message'> <p>{{reversedMessage}}</p> </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue', reversedMessage:'', } }, watch: { message(newValue,oldValue){//这种这种不能立马生效,因为初始化时不会触发 this.reversedMessage = newValue.split('').reverse().join('') } }, }) </script>
-
立即执行:immediate立即执行一次
<div id="app"> <input type="text" v-model='message'> <p>{{reversedMessage}}</p> </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue', reversedMessage:'', } }, watch: { message: { immediate: true, handler: function (newValue, oldVal) { this.reversedMessage = newValue.split('').reverse().join('') } }, }, }) </script>
-
监听复杂对象:为了发现对象内部值的变化,可以在选项参数中指定
deep: true
。注意监听数组的变更不需要这么做<div id="app"> <input type="text" v-model='message.deepMsg'> <p>{{reversedMessage}}</p> </div> <script> const app = new Vue({ el:'#app', data() { return { message:{deepMsg:'hello,vue'}, reversedMessage:'', } }, watch: { message: { //immediate: true, deep:true, handler: function (newValue, oldVal) { this.reversedMessage = newValue.deepMsg.split('').reverse().join('') } }, }, }) </script>
-
-
计算属性和监听器的比较
-
处理数据的场景不同,监听器适合一个数据影响多个数据,计算属性适合一个数据受多个数据影响
-
计算属性有缓存性,计算所得的值如果没有变化不会重复执行
-
监听器选项提供了更通用的方法,适合执行异步操作或较大开销操作的情况
<div id="app"> <input type="text" v-model='message'> <p>{{addMessage}}</p> </div> <script> const app = new Vue({ el:'#app', data() { return { message:'hello,vue', addMessage:'', } }, watch: { message(val){ this.addMessage ='wait.....'; setTimeout(()=>{ this.addMessage = 'change' },2000) }, }, }) </script>
-
标签:vue,return,app,Vue,监听器,reversedMessage,message,属性 来源: https://www.cnblogs.com/EricZLin/p/14003164.html