程序员都必掌握的前端教程之VUE基础教程（二）
阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的计算属性与监听器等知识点。下面我们就一起来学习该块内容吧！
01 计算属性
在日常开发中我们经常遇到需要通过其它数据计算出一个结果然后使用，VUE中的计算属性就提供了像绑定普通属性一样在模板中绑定计算属性，然后再页面中渲染出来。这时就有人会提出我们使用上篇文章中的模板表达式也可以实现同样需求啊，那我们就来看看下面这个例子
1. <div id=”example”> 2. {{ message.split(”).reverse().join(”) }} 3. </div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，我们都应当使用计算属性。
（1）计算属性使用
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”APP”> 11. <p>原始message内容: “{{ message }}”</p> 12. <p>通过计算属性实现message内容的倒排: “{{ reversedMessage }}”</p> 13. </div> 14. <script> 15. var vm = new Vue({ 16. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 17. data: { // 数据对象 18. message: “Hello” 19. }, 20. computed: { 21. // 计算属性的 getter 22. reversedMessage: functiоn () { 23. // `this` 指向 vm 实例 24. return this.message.split(”).reverse().join(”) 25. } 26. } 27. }) 28. </script> 29. </body> 30. </html>
我们打开浏览器的console，然后在console控制器台中修改一下vm对象的message字段内容，然后打印vm. reversedMessage计算属性的getter函数，具体如下：
（2）计算属性的惰性
有人肯定有疑问我们是不是可以通过方法method实现同样的效果
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”app”> 11. <p>原始message内容: “{{ message }}”</p> 12. <p>通过计算属性实现message内容的倒排: “{{ reversedMessage }}”</p> 13. <p>通过计算Method实现message内容的倒排: “{{ reversedMessages() }}”</p> 14. </div> 15. <script> 16. var vm = new Vue({ 17. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 18. data: { // 数据对象 19. message: “Hello” 20. }, 21. methods: { 22. // 通过方法实现倒排 23. reversedMessages(){ 24. return this.message.split(”).reverse().join(”) 25. } 26. }, 27. computed: { 28. // 计算属性的 getter 29. reversedMessage: functiоn () { 30. // `this` 指向 vm 实例 31. return this.message.split(”).reverse().join(”) 32. } 33. } 34. }) 35. </script> 36. </body> 37. </html>
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免地多次执行 A 的 getter，如果某些不需要缓存的场景我们就可以通过method替换计算属性。
（3）计算属性的setter
计算属性默认只有 getter，我们上面的示列都只使用到了计算属性的getter属性，通过其他数据计算而得，其实计算属性还有setter方法，直接赋值，通过计算属性来改变依赖数据的值。下面我们来看看setter的具体使用
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”app”> 11. <p>通过计算属性setter实现姓名设置: “{{ fullName }}”</p> 12. </div> 13. <script> 14. var vm = new Vue({ 15. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 16. data: { // 数据对象 17. firstName: “jack”, 18. lastName: “wang” 19. }, 20. computed: { 21. fullName: { 22. // getter属性 23. get: functiоn () { 24. return this.firstName + ‘ ‘ + this.lastName 25. }, 26. // setter属性，这边的newValue就是你要设置的值 27. set: functiоn (newValue) { 28. let names = newValue.split(‘ ‘) 29. this.firstName = names[0] 30. this.lastName = names[names.length – 1] 31. } 32. } 33. } 34. }) 35. </script> 36. </body> 37. </html>
02 监听器
在开发过程中监听数据的变化VUE提供了监听器watch来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。其具体使用如下：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”app”> 11. <p>监听器示列: “{{ msg }}”</p> 12. <button @click=”handleClick()”>点我</button> 13. </div> 14. <script> 15. var vm = new Vue({ 16. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 17. data: { // 数据对象 18. msg: 1 19. }, 20. methods: { 21. // 点击对msg的值进行加1操作 22. handleClick(){ 23. this.msg++ 24. } 25. }, 26. // 创建监听器 27. watch: { 28. // 创建对msg数据的监听，其newVal为msg改变前的值，oldVal为msg改变后的值 29. msg: functiоn (newVal, oldVal) { 30. console.log(“msg改变前值:”, oldVal) 31. console.log(“msg改变后值:”, newVal) 32. } 33. } 34. }) 35. </script> 36. </body> 37. </html>
03 计算属性与监听属性对比
在实际开发中，计算属性与监听属性在很多场景下都可以实现同样的需求，在这些场景下成哥更建议大家使用计算属性而不是监听属性，因为计算属性相交于命令是的watch回调代码更精简，可读性更高。下面我们看一组对比示列：
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”app”> 11. <div id=”demo”>监听器示例：{{ fullName }}</div> 12. </div> 13. <script> 14. var vm = new Vue({ 15. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 16. data: { // 数据对象 17. firstName: ‘Foo’, 18. lastName: ‘Bar’, 19. fullName: ‘Foo Bar’ 20. }, 21. // 创建监听器 23. watch: { 24. firstName: functiоn (val) { 25. this.fullName = val + ‘ ‘ + this.lastName 26. }, 27. lastName: functiоn (val) { 28. thisthis.fullName = this.firstName + ‘ ‘ + val 29. } 31. } 32. }) 33. </script> 34. </body> 35. </html>
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset=”UTF-8″> 5. <title>VUE基础教程</title> 6. <!– 引用vue.js文件 –> 7. <script src=”vue.js”></script> 8. </head> 9. <body> 10. <div id=”app”> 11. <div id=”demo”>计算属性示例：{{ fullName }}</div> 12. </div> 13. <script> 14. var vm = new Vue({ 15. el: ‘#app’, // dom的挂载点,这边将dom挂载到id为app的标签上 16. data: { // 数据对象 17. firstName: ‘Foo’, 18. lastName: ‘Bar’, 19. fullName: ‘Foo Bar’ 20. }, 21. // 创建计算属性 22. computed: { 23. fullName: functiоn () { 24. return this.firstName + ‘ ‘ + this.lastName 25. } 26. } 27. }) 28. </script> 29. </body> 30. </html>
如上虽然都实现了相同的功能，但计算属性相较于监听器逻辑更简单，代码更精简。
04 总结
至此我们《VUE基础教程二》就讲完了，下篇内容主要讲解VUE的Class与Style绑定相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职X、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同长大。
文章推荐：
程序员都必掌握的前端教程之VUE基础教程（一）
程序员都必掌握的前端教程之CSS基础教程（上）
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126537.html
starterknow