Vue的计算属性和方法和侦听器
Posted tcz1018
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的计算属性和方法和侦听器相关的知识,希望对你有一定的参考价值。
Vue的计算属性和方法和侦听器
(一)计算属性
首先要明白在模板语法里面可以进行简单运算 但是尽量不要会有过多逻辑不好维护 所以把操作单独列出来
//会弄的很乱是吧
<div
{{ message.split(‘‘).reverse().join(‘‘) }}
</div>
所以把操作方放在 computed里面
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
data(){
return{
message: ‘Hello‘
}
},
computed: {
// 计算属性的 getter 写成一个函数进行操作 进行返回值
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘‘).reverse().join(‘‘)
}
}
(二)方法 methods
方法区分于计算属性
例如:
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split(‘‘).reverse().join(‘‘)
}
}
划重点 区别在
计算属性是基于它们的响应式依赖进行缓存的。只在相关的数据响应式依赖发生改变时它们才会重新求值。只要上述例子里面的message没有发生改变 就不会在执行
源码中的 Date.now() 不是响应式依赖
但是methods就不了 只要触发重新渲染就会再次执行
再划重点
计算属性是有缓存的,执行一遍之后,只要有数据不变,他就不会刷新这是他的特点 就是像是那些很大的性能计算 就要用计算属性对吧 尴尬的是较真的我在想 既然比起来计算属性这么牛还用methods干啥啊 我又一想 你是智障吗 这是个框架 JS本就是要写方法的,只不过这个做了优化计算属性才有这个特点的啊 是的哈
(三)侦听器(侦听属性)和计算属性的区别
什么是侦听器:
就是看着你变了 我就怎么样 watch 来进行相应数据变化
举例子
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
data() {
return{
question: ‘‘,
answer: ‘I cannot give you an answer until you ask a question!‘
}
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = ‘Waiting for you to stop typing...‘
}
},
还是重点
这个例子只是演示了怎么是用watch 但是在官网 很形象的展示了
就是限制频率进行相应的操作 这个没有用到 用到再来补充
(四) 计算属性的stter
在用的时候一般就是使用计算属性进行数据返回 所以呢 就来了一个 数据设置 触发的时候进行数据的设置 不写例子了
感触:
一开始你自己开始学习相关的编程知识 学的不深 开始工作了 哎呀人家用框架啊 开始学框架啊 其实啊框架不就是一群人做了牛的壳子 你去按照人家的写法来写自己的项目 然后我我们就在这一点点的学 学一点懂一些 其实很多时候要是知道了框架的底层会更加的明白 就像是 计算属性里面都是使用绑定值返回值 人家就是个方法 咋不能去设置值呢是啊吧
以上是关于Vue的计算属性和方法和侦听器的主要内容,如果未能解决你的问题,请参考以下文章