• Vue 计算属性

    计算属性关键词：computed。

    计算属性在处理一些复杂逻辑时是很有用的。

    可以看下以下反转字符串的例子：

    1. <div id="app">
    2.   {{ message.split('').reverse().join('') }}
    3. div>

    实例 1 中模板变的很复杂起来，也不容易看懂理解。

    接下来我们看看使用了计算属性的实例：

    1. html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>Vue 测试实例title>
    6. <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    7. head>
    8. <body>
    9. <div id="app">
    10.   <p>原始字符串: {{ message }}p>
    11.   <p>计算后反转字符串: {{ reversedMessage }}p>
    12. div>
    13.     
    14. <script>
    15. const app = {
    16.   data() {
    17.     return {
    18.       message: 'RUNOOB!!'
    19.     }
    20.   },
    21.   computed: {
    22.     // 计算属性的 getter
    23.     reversedMessage: function () {
    24.       // `this` 指向 vm 实例
    25.       return this.message.split('').reverse().join('')
    26.     }
    27.   }
    28. }
    29.  
    30. Vue.createApp(app).mount('#app')
    31. script>
    32. body>
    33. html>

    实例2中声明了一个计算属性 reversedMessage。

    提供的函数将用作属性 vm.reversedMessage 的 getter。

    vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversed Message也会更新。

    computed vs methods

    我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

    1. <script>
    2. methods: {
    3.   reversedMessage2: function () {
    4.     return this.message.split('').reverse().join('')
    5.   }
    6. }
    7. script>

    可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

    computed setter

    computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

    1. <script>
    2. const vm = new Vue({
    3.   el: '#app',
    4.   data: {
    5.     name: 'Google',
    6.     url: 'http://www.google.com'
    7.   },
    8.   computed: {
    9.     site: {
    10.       // getter
    11.       get: function () {
    12.         return this.name + ' ' + this.url
    13.       },
    14.       // setter
    15.       set: function (newValue) {
    16.         var names = newValue.split(' ')
    17.         this.name = names[0]
    18.         this.url = names[names.length - 1]
    19.       }
    20.     }
    21.   }
    22. })
    23. // 调用 setter， vm.name 和 vm.url 也会被对应更新
    24. vm.site = '百度 https://www.baidu.com/';
    25. document.write('name: ' + vm.name);
    26. document.write('
      '      );
    27. document.write('url: ' + vm.url);
    28. script>

    从实例运行结果看在运行 vm.site = '百度 www.baidu.com/'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。 

    ​

     

  • 相关阅读:
    11.9 实现磁盘相关操作
    H5画布绘制笑脸
    Rsync分布式应用
    数据分析—将txt文件转为csv文件；将csv文件转为xls文件
    pwn--realloc [CISCN 2019东南]PWN5
    GitHub上8.5K 收藏! Python 代码内存分析的利器
    基于I2C协议的OLED显示(利用U82G库)
    智能汽车-AR/VR应用浅析
    点云从入门到精通技术详解100篇-基于点云数据的工件三维重建
    我用shell脚本实现项目容器化自动部署
  • 原文地址：https://blog.csdn.net/qq_56515781/article/details/126029775