精华内容
下载资源
问答
  • vue3计算属性
    2021-08-17 19:42:10

    计算属性computed是用来存储属性数据的

    对数据进行逻辑处理操作,实现数据包装

    计算属性通常依赖于当前vue对象中的普通属性

    当依赖的依赖的普通属性发生变化的时候,计算属性也会发生变化

    计算属性俩部分构成:

    get用来获取计算属性

    set用来设置计算属性

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<p>{{ msg }}</p>
    			<!-- 对普通属性进行逻辑处理,然后再展示 -->
    			<p>{{ msg.toUpperCase().split(' ').reverse().join(' ') }}</p>
    		    
    			<p>{{ reverseMsg }}</p>
    			<button @click="msg= 'hello word'">修改属性</button>
    			
    			<p>{{ num }}</p>
    			<p> {{ doubleNum }} </p>
    			<button @click="doubleNum= 8">修改属性</button>
    		</div>
    		<script>
    			Vue.createApp({
    				data(){//普通属性
    					return{
    						msg:'welcom to vue',
    						num:4
    					}
    				},
    				computed:{//计算属性
    					reverseMsg:function(){
    						return this.msg.toUpperCase().split(' ').reverse().join(' ')
    					},
    					doubleNum:{//同时制定get和set函数
    						get:function(){
    							return this.num*2
    						},
    						set:function(value){
    							this.num=value//由于doubleNum依赖于num,所以要给num赋值
    						}
    					}
    				}
    			}).mount("#app")
    		</script>
    	</body>
    </html>
    

     

    更多相关内容
  • Vue3 计算属性

    千次阅读 2022-03-29 10:30:58
    vue2中的计算属性,写法是配置项 在vue3中变成了组合式api,写法是一个函数,其余写法基本一致,如果计算出来的属性只读,可以写完简写形式,如何需要修改 则要配置getter和 setter <template> 姓:<...

    在vue2中的计算属性,写法是配置项

    在vue3中变成了组合式api,写法是一个函数,其余写法基本一致,如果计算出来的属性只读,可以写完简写形式,如何需要修改 则要配置getter和 setter

    <template>
    	姓:<input type="text" v-model="person.firstName">
    	<br>
    	名:<input type="text" v-model="person.lastName">
    	<br>
    	全名:<input type="text" v-model="person.fullName">
        <br>  
    	<span>全名:{{person.fullName}}</span>
    	
    </template>
    
    <script>
    	import {reactive,computed} from 'vue'
    	export default {
    		name: 'Demo',
    		setup(){
    			let person = reactive({
    				firstName:'张',
    				lastName:'三'
    			})
    			//计算属性——简写
    			/* person.fullName = computed(function(){
    				return person.firstName + '-' + person.lastName
    			}) */
    
    			//计算属性——完整写法
    			person.fullName = computed({
    				get(){
    					return person.firstName + '-' + person.lastName
    				},
    				set(value){
                        //获取到这个属性的最新值
                        console.log(value);
    					const nameArr = value.split('-')
    					person.firstName = nameArr[0]
    					person.lastName = nameArr[1]
    				}
    			})
    			return {
    				person
    			}
    		}
    	}
    </script>

     

    展开全文
  • Vue3计算属性和异步计算属性

    千次阅读 2021-10-18 19:56:10
    不论是计算属性,还是异步计算属性,都是依托于Vue3整体的响应式原理实现的。其核心依旧是ReacetEffect类。如果对响应式原理不清楚,建议先看响应式原理章节。计算属性和常规的动态响应区别在于它不会主动的去执行...

    一、简要介绍

    不论是计算属性,还是异步计算属性,都是依托于Vue3整体的响应式原理实现的。其核心依旧是ReacetEffect类。如果对响应式原理不清楚,建议先看响应式原理章节。计算属性和常规的动态响应区别在于它不会主动的去执行ReacteEffect所关联的回调方法,而是用一个标记来表示当前的值是否有改变,如果有改变,则重新调用回调方法获取,如果没改动,则直接获取上次计算的值。

    二、计算属性核心源码

    export type ComputedGetter<T> = (...args: any[]) => T
    export type ComputedSetter<T> = (v: T) => void
    
    export interface WritableComputedOptions<T> {
      get: ComputedGetter<T>
      set: ComputedSetter<T>
    }
    
    class ComputedRefImpl<T> {
      public dep?: Dep = undefined
    
      private _value!: T
      private _dirty = true
      public readonly effect: ReactiveEffect<T>
    
      public readonly __v_isRef = true
      public readonly [ReactiveFlags.IS_READONLY]: boolean
    
      constructor(
        getter: ComputedGetter<T>,
        private readonly _setter: ComputedSetter<T>,
        isReadonly: boolean
      ) {
        //内部存储一个ReactiveEffect对象
        this.effect = new ReactiveEffect(getter, () => {
          if (!this._dirty) {
            //标记下次读取将重新计算值
            this._dirty = true
            //触发依赖更新
            triggerRefValue(this)
          }
        })
        this[ReactiveFlags.IS_READONLY] = isReadonly
      }
    
      get value() {
        // the computed ref may get wrapped by other proxies e.g. readonly() #3376
        const self = toRaw(this)
        //收集依赖
        trackRefValue(self)
        //是否重新计算标记
        if (self._dirty) {
          //重新计算
          self._dirty = false
          self._value = self.effect.run()!
        }
        //直接获取计算好的值
        return self._value
      }
    
      set value(newValue: T) {
        this._setter(newValue)
      }
    }
    
    export function computed<T>(
      getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
      debugOptions?: DebuggerOptions
    ) {
      let getter: ComputedGetter<T>
      let setter: ComputedSetter<T>
    
      const onlyGetter = isFunction(getterOrOptions)
      if (onlyGetter) {
        getter = getterOrOptions
        setter = __DEV__
          ? () => {
              console.warn('Write operation failed: computed value is readonly')
            }
          : NOOP
      } else {
        getter = getterOrOptions.get
        setter = getterOrOptions.set
      }
      //只需要关注这儿
      const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter)
    
      if (__DEV__ && debugOptions) {
        cRef.effect.onTrack = debugOptions.onTrack
        cRef.effect.onTrigger = debugOptions.onTrigger
      }
    
      return cRef as any
    }
    

    一个计算属性对象的生成都是通过computed方法生成的,这个方法其实就是接收一个get方法和一个set方法,并生成一个ComputedRefImpl类型的对象。ComputedRefImpl类的实现很简单,生成一个ReactiveEffect类型对象,并实现一个value属性的读写方法。在读的时候收集依赖,并判断是否重新计算。特殊的地方在于这个ReactiveEffect类型的对象接收了第二个参数。我们细看一下触发依赖更新的代码,如下:

    export function triggerEffects(
      dep: Dep | ReactiveEffect[],
      debuggerEventExtraInfo?: DebuggerEventExtraInfo
    ) {
      // spread into array for stabilization
      for (const effect of isArray(dep) ? dep : [...dep]) {
        if (effect !== activeEffect || effect.allowRecurse) {
          if (__DEV__ && effect.onTrigger) {
            effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
          }
          if (effect.scheduler) {
            effect.scheduler()
          } else {
            effect.run()
          }
        }
      }
    }
    

    里面逻辑很简单,遍历依赖里面的ReactiveEffect类型对象,如果存在scheduler方法,就调用这个方法。我们在看ReactiveEffect类的定义,代码如下:

    export class ReactiveEffect<T = any> {
      active = true
      deps: Dep[] = []
    
      // can be attached after creation
      computed?: boolean
      allowRecurse?: boolean
      onStop?: () => void
      // dev only
      onTrack?: (event: DebuggerEvent) => void
      // dev only
      onTrigger?: (event: DebuggerEvent) => void
    
      constructor(
        public fn: () => T,
        public scheduler: EffectScheduler | null = null,
        scope?: EffectScope | null
      ) {
        recordEffectScope(this, scope)
      }
    }
    

    此时就可以发现,ComputedRefImpl类里面的effect对象接收的第二个参数就是scheduler方法,因此当有依赖的数据变更时,会执行这个方法,这个方法很好理解。就是改变标记,意味着下一次读取这个计算属性,你需要重新计算了,不能用之前的缓存值了。接着触发依赖更新,不用疑惑,因为这个计算属性本身也是响应式的,自身改变需要通知相应的依赖更新。至于这个判断,是百分之百为true的,因为触发依赖需要先添加依赖,而在读取value值添加依赖会将标志置为false。

    三、异步计算属性核心源码

    const tick = Promise.resolve()
    const queue: any[] = []
    let queued = false
    
    const scheduler = (fn: any) => {
      queue.push(fn)
      if (!queued) {
        queued = true
        tick.then(flush)
      }
    }
    
    const flush = () => {
      for (let i = 0; i < queue.length; i++) {
        queue[i]()
      }
      queue.length = 0
      queued = false
    }
    
    class DeferredComputedRefImpl<T> {
      public dep?: Dep = undefined
    
      private _value!: T
      private _dirty = true
      public readonly effect: ReactiveEffect<T>
    
      public readonly __v_isRef = true
      public readonly [ReactiveFlags.IS_READONLY] = true
    
      constructor(getter: ComputedGetter<T>) {
        let compareTarget: any
        let hasCompareTarget = false
        let scheduled = false
        this.effect = new ReactiveEffect(getter, (computedTrigger?: boolean) => {
          if (this.dep) {
            if (computedTrigger) {
              compareTarget = this._value
              hasCompareTarget = true
            } else if (!scheduled) {
              const valueToCompare = hasCompareTarget ? compareTarget : this._value
              scheduled = true
              hasCompareTarget = false
              //加入执行队列
              scheduler(() => {
                if (this.effect.active && this._get() !== valueToCompare) {
                  triggerRefValue(this)
                }
                scheduled = false
              })
            }
            // chained upstream computeds are notified synchronously to ensure
            // value invalidation in case of sync access; normal effects are
            // deferred to be triggered in scheduler.
            for (const e of this.dep) {
              if (e.computed) {
                e.scheduler!(true /* computedTrigger */)
              }
            }
          }
          //保证异步方法获取值时是重新计算的。
          this._dirty = true
        })
        this.effect.computed = true
      }
    
      private _get() {
        if (this._dirty) {
          this._dirty = false
          return (this._value = this.effect.run()!)
        }
        return this._value
      }
    
      get value() {
        trackRefValue(this)
        // the computed ref may get wrapped by other proxies e.g. readonly() #3376
        return toRaw(this)._get()
      }
    }
    
    export function deferredComputed<T>(getter: () => T): ComputedRef<T> {
      return new DeferredComputedRefImpl(getter) as any
    }
    
    

    异步计算属性和计算属性结构几乎一致,最为主要的区别在于ReactiveEffect类型对象的第二个参数上的不同。这个方法当依赖的某个数据变更时调用,我们先不管第一个if判断,直接看else里面的内容,简单来说就是将一个方法放入异步执行队列里面,然后异步执行。因为当依赖数据变更时,_dirty属性被置为了true,所以这个二异步执行的方法会去计算最新的值并触发依赖更新。我们现在看if里面的内容,这个分支是通过下面代码进入的。

    for (const e of this.dep) {
      if (e.computed) {
        e.scheduler!(true /* computedTrigger */)
      }
    }
    

    这儿的设计原理其实是因为当同步的获取异步计算属性时,会取到最新的值,当执行异步方法时,由于已经获取过一次数据,为了保证this._get() !== valueToCompare判断值是true,valueToCompare必须等于重新计算之前的值。可以通过以下示例解释:

        const src = ref(0)
        const c1 = deferredComputed(() => {
          return src.value % 2
        })
        const c2 = deferredComputed(() => {
          return c1.value + 1
        })
        effect(() => {
          c2.value
        })
        src.value = 1
        //同步打印c2.value,输出2
        console.log(c2.value);
    

    上述流程,当赋值src.value = 1时,c1执行回调,由于c2依赖c1的值,所以c2也会执行回调,这儿的回调都是指scheduler方法,_dirty属性会被置为true,所以在同步打印c2.value的值时,会去重新计算c2,此时c1的_dirty属性也被置为了true,所以c1的值也会重新计算,即同步打印的c2会取到最新的值。但需要注意的时,此时异步队列里面的方法还未执行。当同步代码执行完后,开始执行异步队列里面的方法,但执行到如下代码时:

    if (this.effect.active && this._get() !== valueToCompare) {
        triggerRefValue(this)
    }
    

    由于同步打印过c2.value的值,此时_get()方法会从缓存里面取值,如果valueToCompare不等于计算前的值,而直接等于this._value,则判断为false,不会触发下面的依赖更新方法。异步计算属性的核心思想,其实就只是把依赖更新的逻辑放入了异步队列,通过异步的形式执行,其主要逻辑和计算属性几乎一致,只在细节上略有不同。

    展开全文
  • vue3 计算属性的写法

    万次阅读 2020-12-03 12:17:28
    <template> <div class="container"> <p>{{count}}</p> <p>{{double}}<...button class="btn btn-primary" @click="add" type="submit">...script lang="ts".
    <template>
    <div class="container">
    
      <p>{{count}}</p>
    
      <p>{{double}}</p>
      
      <button class="btn btn-primary" @click="add" type="submit">+</button>
    
    </div>
      
    </template>
    
    <script lang="ts">
    import { defineComponent, computed ,ref} from 'vue';
    import 'bootstrap/dist/css/bootstrap.min.css'
    import axios from 'axios'
    
    // 就会提供些额外的方法
    export default defineComponent({
      name: 'App',
      // setup 方 法还不能为空,真的很奇葩的事情
      setup(){
        const count = ref(100);
        const double = computed(()=>{
          return count.value* 2;
        })
        const add = ()=>{
          count.value ++;
        }
        return {
          count,
          double,
          add
        }
      }
    });
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    效果:

    没有任何问题, 点击加号,都会发生变化

    ————————————————————

     

    watch 监听咋写??

     

     

     

     

    展开全文
  • vue3计算属性传参

    千次阅读 2022-03-25 11:18:29
    场景大概是我从接口中获取一个对象数组的列表,某一行数据使用计算属性进行处理, <ul> <li>{{demandStatusFilter(row.status)}}</li> </ul> import { defineComponent, reactive, ref,...
  • Vue3中的计算属性

    千次阅读 2022-02-09 17:38:42
    Vue3中的计算属性
  • Vue3 _ 6. Vue 计算属性

    千次阅读 2021-07-01 11:47:15
    一、什么是计算属性 我们先来看官网的例子。 可以看到哈,这个是通过判断 author.books 的数组长度来进行显示 YES 或者 NO 的。这个是可以使用的,但是如果我们在代码中这样的东西写的太多了,等后期进行维护的...
  • vue3的computed计算属性传参

    千次阅读 2022-04-29 23:44:10
    在使用计算属性时,尤其是有v-for和slot插槽的使用时,进行一些参数的传递。 1. 在v-for中使用计算属性传参。 <div v-for="item in list"> <div v-if='isShow(item)'>是否显示</div> </div...
  • 下面小编就为大家分享一篇关闭Vue计算属性自带的缓存功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue计算属性详解

    千次阅读 2022-05-24 10:31:10
    Vue计算属性详解
  • 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。  二、计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一...
  • Vue计算属性

    千次阅读 2020-11-02 19:51:20
    一,计算属性 通过前面的学习,我们可以在模板中双向绑定一些数据或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得雕肿甚至难以阅读和维护。例如: <div id="example"> {{ message.split('')....
  • Vue.js教程之计算属性

    2020-12-29 03:16:48
    当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 通常情况下,使用计算属性会比使用过程...
  • 今天小编就为大家分享一篇vue计算属性无法监听到数组内部变化的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Computed 计算属性Vue 中常用的一个功能,但你理解它是怎么工作的吗? 拿官网简单的例子来看一下: <p>Original message: {{ message }} <p>Computed reversed message: {{ reversedMessage }} var vm = ...
  • 计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。 methods和computed看起来都可以实现我们的功能, 那么为什么还要多一个计算属性这个东西呢? 原因:计算...
  • 原因: vue计算属性不能设置,只能读取 解决:
  • vue使用计算属性计算商品总价

    千次阅读 2020-10-28 21:31:56
    vue计算商品总价使用 ---- 计算属性 注 命名规则: 属性名称,方法名称,变量名称 尽量使用小驼峰命名法 computed:{ totalPrice() { let totalPrice = 0 for (let i = 0; i< this.books.length; i++) { ...
  • vue使用计算属性遇到的一些问题 问题描述: 在vue计算属性中,使用全局变量,改变全局变量,计算属性不会重新计算;改变“this.height”,假如height原先在data中定义过了,则计算属性会改变,否则不会改变。 ...
  • Vue.js 计算属性

    2020-12-14 04:44:51
    Vue.js 计算属性 计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。 可以看下以下反转字符串的例子: 实例 1 {{ message.split('').reverse().join('') }} 实例 1 中模板变的很复杂起来,...
  • console.log(ctx.attrs)//与vue2中$attrs相似,组件内部没有声明接收的属性 console.log(ctx.slots)//收到的插槽内容,与this.$solt console.log(ctx.emit)//相当于this.$emit const person = reactive({ leftname:'...
  • 如何控制Vue计算属性刷新

    千次阅读 2020-07-24 20:43:55
    每当地图缩放一次后,都会重新计算坐标点(无论是在指定范围类变化还是在范围之间变化), 这样就造成了大量的性能问题(我骁龙865都明显感觉到不流畅了,毕竟几万条数据) 希望的结果是当数据在14以下的范围内或者...
  • vue3中computed计算属性函数

    千次阅读 2021-09-13 23:52:47
    目标:现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,今天说一下vue3中computed计算属性的使用。 computed函数在vue2中我们都了解过,当我们需要一个值,这个值随着其他值变化而变化,我们就将其放进...
  • 使用vue2的方式写计算属性 <template > 第一句:<input type="text" v-model="verse.first"> <br> {{verse.first}} <br> 第二句:<input type="text" v-model="verse.next"> <br&...
  • vue3 setup computed 计算属性

    千次阅读 2022-03-13 21:43:11
    计算属性还是和vue2一样,没啥特别大的改变 个人理解:计算属性,说白了也是实例数据的一种,只是这个属性依赖于当前实例的其他数据,并且居右缓存功能,就想我们在data中定义一个name并且初始化的时候给一个值,相...
  • 计算属性和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变。下面这篇文章主要给大家介绍了关于Vue计算属性computed的相关资料,需要的朋友可以参考下。
  • Vue - 计算属性

    万次阅读 2021-11-01 17:56:04
    1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,829
精华内容 32,731
关键字:

vue3计算属性