精华内容
下载资源
问答
  • computed

    千次阅读 2019-12-07 13:30:44
    computed

    https://cn.vuejs.org/v2/guide/computed.html


     


    计算属性和监视

    <!--
    1. 计算属性
      在computed属性对象中定义计算属性的方法
      在页面中使用{{方法名}}来显示计算的结果
    2. 监视属性:
      通过通过vm对象的$watch()或watch配置来监视指定的属性
      当属性变化时, 回调函数自动调用, 在函数内部进行计算
    3. 计算属性高级:
      通过getter/setter实现对属性数据的显示和监视
      计算属性存在缓存, 多次读取只执行一次getter计算
    -->
    <div id="demo">
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        <!--fullName1是根据fistName和lastName计算产生-->
        <!--v-model指令用于在表单类元素上实现双向绑定数据-->
        姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
        姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
        姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
    
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName2: 'A-B'
            },
    
            // 计算属性配置: 值为对象
            computed: {
                fullName1() { // 属性的get()
                    console.log('fullName1()', this)
                    return this.firstName + '-' + this.lastName
                },
    
                fullName3: {
                    // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
                    get() {
                        console.log('fullName3 get()')
                        return this.firstName + '-' + this.lastName
                    },
                    // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
                    set(value) {// fullName3的最新value值  A-B23
                        console.log('fullName3 set()', value)
                        // 更新firstName和lastName
                        const names = value.split('-')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    }
                }
            },
    
            watch: {
                // 配置监视firstName
                firstName: function (value) { // 相当于属性的set
                    console.log('watch firstName', value)
                    // 更新fullName2
                    this.fullName2 = value + '-' + this.lastName
                }
            }
        })
    
        // 监视lastName
        vm.$watch('lastName', function (value) {
            console.log('$watch lastName', value)
            // 更新fullName2
            this.fullName2 = this.firstName + '-' + value
        })
    
    </script>

     

    展开全文
  • computed: { //计算属性 msg2: function () { //该函数必须有返回值,用来获取属性,称为get函数 return 'hello'; }, reverseMsg() { return this.msg.split(' ').reverse().join(' ...
  • vue computed正确使用方式

    万次阅读 多人点赞 2019-07-03 21:16:13
    最近面试中,遇到一个小伙子,谈到了vue中的 computed 和 watch 区别,最后得到了一个让我瞠目结舌的答案,只用 watch,从不用 computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放...

    最近面试中,遇到一个小伙子,谈到了vue中的 computedwatch 区别,最后得到了一个让我瞠目结舌的答案,只用 watch,从不用 computed

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于复杂逻辑,vue 提倡使用计算属性。需要特别说明:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解 — from Vue计算属性

    讨论 computedwatch 之间的区别前,我们先看下 computedmethods 有何区别?

    computed or methods

    理论上,computed 所有实现可以使用 methods 完全替换。

    <p>Reversed message: "{{ reversedMessage() }}"</p>
    <p>Reversed message: "{{ reversedMessage }}"</p>
    
    // 计算属性
    computed: {
      reversedMessage () {
        return this.message.split('').reverse().join('')
      }
    }
    // 方法
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
    

    计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。而方法却会执行。

    这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:

    computed: {
      now: function () {
        return Date.now()
      }
    }
    

    我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

    相同之处: computedmethods 将被混入到 Vue 实例中。vm.reversedMessage/vm.reversedMessage() 即可获取相关计算属性/方法。

    接下来,看下 computedwatch 有何区别?

    computed or watch

    Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch,然而,通常更好的做法是使用计算属性而不是命令式的 watch 回调。

    当需要在数据变化时执行异步或开销较大的操作时, watch 方式是最有用的。其允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

    methods: {
      getAnswer: function () {
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      }
    },
    created: function () {
      // debounce 反弹函数
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    }
    
    

    这样来看,watch 完全可以替代 computed ?什么情况下,只能使用computed呢?

    回顾 computed 最大特点就是缓存,所以上述问题可以转换为:哪些情况下,我们需要依赖缓存?

    示例:父组件给子组件传值,值的类型为引用类型

    父组件

    <template>
      <div>
        <child :user="user"></child>
        <label for="user">parent:</label>
        <input id="user" type="text" v-model="user.name">
      </div>
    </template>
    <script>
    import Child from './child.vue'
    export default {
      data () {
        return {
          user: { name: 'ligang' }
        }
      },
      components: { Child }
    }
    </script>
    

    子组件

    <template>
      <div>child: {{user}}</div>
    </template>
    <script>
    export default {
      name: 'child',
      props: ['user']
    }
    </script>
    

    现在有这样一个需求,子组件中需要同时显示改变前和改变后的值。

    So Easy,只需要在 watch 中保存 oldVal 即可。

    <template>
      <div>
        <div>child:</div>
        <div>修改前:{{oldUser}} 修改后:{{user}}</div>
      </div>
    </template>
    <script>
    export default {
      name: 'child',
      props: ['user'],
      data () {
        return {
          oldUser: {}
        }
      },
      watch: {
        user: {
          handler (val, oldVal) {
            this.oldUser = oldVal || val
          },
          deep: true,
          immediate: true
        }
      }
    }
    </script>
    

    查看结果,WTF,啥情况~~

    在这里插入图片描述

    问题在于,user为引用类型,且 watch 没有做缓存,导致了修改的是同一个对象,所以,watch 方法中**val === olVal is true!!**

    如何达到要求呢,这里我们就可以借用 computed 缓存的特性,来完成上述情况。

    计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。 — vue-computed-api

    <template>
      <div>
        <div>child:</div>
        <div>修改前:{{oldUser}} 修改后:{{user}}</div>
      </div>
    </template>
    <script>
    export default {
      name: 'child',
      props: ['user'],
      data () {
        return {
          oldUser: {}
        }
      },
      // 缓存 userInfo   
      computed: {
        userInfo () {
          return { ...this.user }
        }
      },
      watch: {
        userInfo: {
          handler (val, oldVal) {
            this.oldUser = oldVal || val
          },
          deep: true,
          immediate: true
        }
      }
    }
    </script>
    

    需要注意:{ ...this.user } 或者使用 Object.assign({}, this.user) 来创建新的引用!

    展开全文
  • <div><p>When using mobx computed inside vue computed, vue computed don't get updated. <p>https://codesandbox.io/s/m5k1yrn2xx click add</p><p>该提问来源于开源项目:mobxjs/mobx-vue</p></div>
  • vue中computed计算属性传入参数

    万次阅读 2018-09-01 16:56:42
    使用JavaScript闭包,进行传值操作...computed: { // 控制显示的内容 computedTxt() { return function(value) { return this.methodGetByteLen(value, 20) } } } 做一个简单的功能,使用计算属性判断传入的...

    将计算属性的返回值改为函数,再进行传值操作。

    computed: {
          // 控制显示的内容
          computedTxt() {
            return function(value) {
              return this.methodGetByteLen(value, 20)
            }
          }
    }

    做一个简单的功能,使用计算属性判断传入的字符超过了20就去掉后面的字符在尾部添加。。。

    /**
           * str 需要控制的字符串
           * len 字节的长度,如5个汉字,10个英文,输入参数就是10
           */
          methodGetByteLen(str, len) {
            //因为第一次进入时为空,所以此if进行拦截
            if (str === null || str === undefined || str == '') {
              return;
            }
            // 如果字节的长度小于控制的长度,那么直接返回
            if (this.computedCharLen(str) <= len) {
              return str
            }
            for (let i = Math.floor(len / 2); i < str.length; i++) {
              if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
                return str.substr(0, Math.floor(i / 2) * 2) + '......'
              }
            }
          },
          // 获取字符的个数
          computedCharLen(str) {
            let realLength = 0, len = str.length, charCode = -1;
            for (let i = 0; i < len; i++) {
              charCode = str.charCodeAt(i);
              if (charCode >= 0 && charCode <= 128) realLength += 1;
              else realLength += 2;
            }
            return realLength;
        }
    <ul class="r-list">
          <li v-for="(item,index,key) in result" :key="key">
            <div>{{computedTxt(item.title)}}</div>
            <div>{{item.time}}</div>
          </li>
        </ul>

    还可以使用filters 过滤器。

    展开全文
  • computed 小程序自定义组件扩展 behavior,计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时,会重新计算 computed 字段并触发 watch 监听器。 此 behavior 依赖开发者工具的 npm 构建。...
  • computed properties

    2020-12-09 11:58:47
    <div><p>add a method to define a method or property as computed, for example if <code>.fullname</code> were computed, when either <code>.first</code> or <code>.last</code> is updated then emit <code>...
  • 目录:1.computed2.watch3.watch相较于computed的不同1. computed-计算属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ ...

    d7df14651b7ca31be1c97856278a92ea.png

    目录:

    1.computed

    2.watch

    3.watch相较于computed的不同


    1. computed-计算属性

    <div id="example">
      <p>Original message: "{{ message }}"</p>      
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    var vm = new Vue({
      el: '#example',
      data: {
        message: 'Hello'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      }
    })
    ​
    console.log(vm.reversedMessage) // => 'olleH'
    vm.message = 'Goodbye'
    console.log(vm.reversedMessage) // => 'eybdooG'

    1.1 不需要加括号

    模板内使用computed时,直接写方法名,不需要在后面加括号

    1.2 会根据依赖是否变化来缓存(相比于methods)

    只要message没发生变化,多次访问reversedMessage计算属性会立即返回之前的结果,而不必再次执行函数

    相比于methods中写同一个函数,每当出发重新渲染,调用方法就会再次执行函数

    缓存的优点在于 : 此时如果computed有个性能开销大的A,需要进行大量的计算,然后有其他computed属性依赖A。如果没有缓存,肯定要多次执行A的getter。

    2. watch-侦听器

    当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        obj: {
            x:"kiki",
        } 
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        }
      }
    })
    

    2.1 一旦data变化,就执行函数

    注意,此时的更新是异步的

    2.2 opitons.watch用法

    上述代码

    vm.a = 2 // => new: 2, old: 1
    

    2.3 this.$watch用法

    2.4 deep含义

    template,watch部分增加如下代码

    template:`
        <div>
            <button @click = "a += 1">a+1</button>
            <button @click = "obj.x += 1">obj.x + 'hi'</button>
        </div>
        `, 
    
    watch: {
       b() {
           console.log("b 变了")
       },
       obj() {
            console.log(:"obj 变了")
       },
       "obj.a":function() {
             console.log("obj.a 变了")
         }
      }
    

    此时如果改变obj.a,控制台会打出"obj.a 变了",此时加上deep:true

       obj() {
            handler(){
                console.log(:"obj 变了")
            }
            deep:true
       }
    

    再次改变obj.a,控制台会打出 "obj变了",无论嵌套多深,只要对象的属性改变,就会被监听

    2.5 immeditate 用法

     d: {
          handler: 'someMethod',
          immediate: true
        }
    

    该回调将在watch之后被立即调用

    2.5 watch是异步的,如何在 Vue 中执行延迟回调

    Vue.nextTick([callback,context])
    ​
    参数:
    {Function}[callback]
    {Object}[context]
    ​
    vm.msg = 'Hello'
    //DOM还没更新
    Vue.nextTick(function(){
        //Dom更新了
    })

    3.watch相较于computed不同点

    watch允许我们:

    1.执行异步操作 (访问一个 API),

    2.限制我们执行该操作的频率,

    3.并在我们得到最终结果前,设置中间状态,

    这些computed无法做到

    展开全文
  • Computed fields

    2021-01-02 06:59:04
    <div><p>Is there a way I can create my own computed fields? <p>Would you have an example? <p>I. E. Deviding 2 values by 2 and the multiply by 10.</p><p>该提问来源于开源项目:jam-py/jam-py</p></...
  • Computed properties

    2020-11-27 09:48:19
    <div><p>Is there any way to define computed properties? A property on an instance of a model that is calculated from other properties on the instance. <p>Could use an instance method to return the ...
  • vue computed

    2018-12-13 14:33:55
    https://www.w3cplus.com/vue/vue-computed-intro.html 包括vue中 methods computed 以及异步computed的说明 vue-async-computed
  • Computed Tomography

    2014-05-23 16:50:21
    医学和生物医学经典教材, Computed Tomography - fundamentals,System Technology, Image Quality, Applications,Kalender, W.,
  • Vue computed

    2019-12-02 10:01:45
    computed和 methods区别 methods: 函数没有缓存,每次都会被调用 computed: 计算属性有缓存,只有数值改变之后才会被调用;有get和set函数(双向绑定) 总得分(函数-单向绑定): ​ ​ 总得分(计算属性-单向...
  • computed tomography

    2014-09-16 22:44:11
    This book provides an overview of X-ray technology, the historic developmental milestones of modern CT systems, and gives a comprehensive insight into the main reconstruction methods used in computed ...
  • computed属性

    2019-06-06 10:49:34
    computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理; computed比较适合对多个变量或者对象进行处理后返回一个结果...
  • computed setter

    2018-08-01 14:16:00
    computed setter computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter : 实例 4 var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: ...
  • computed watch

    2019-05-23 23:25:46
    computed 执行的时机:页面加载/computed里面相关属性发生变化 //这个计算属性(函数)需要一个返回值作为函数的结果 计算属性名不能是data里面的属性名 watch:属性名就是要监听的属性名,属性发生变化就执行 ...
  • lastName: 'Lucy'有get和set:watch:一、作用机制上1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”...
  • 这样看来,data 和 computed 在功能上似乎没有任何区别。data 和 computed 最核心区别先一言以蔽之,data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动,而computed 会。(赋值变量类似...
  • Computed properties.

    2021-01-08 12:07:06
    </a> feature, where computed properties are functions that have dependencies on <code>data</code> (where <code>data</code> is to Vue as <code>props</code> are to SkateJS). <p>Due to Vue's ...
  • Added Computed Properties

    2020-12-27 22:49:44
    <ul><li>Adds computed properties to <code>vue-mc</code></li><li>Adds the <code>computed()</code> and <code>_computed</code> method / vue attribute</li><li>Allows access to them through <code>Object....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,955
精华内容 8,782
关键字:

computed