VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • vue3.0之ref函数

1.ref推荐定义基本数据类型(ref值也可以是对象,但是一般情况下是对象直接使用reactive更合理)。

2.在 Vue 的模板中使用 ref 的值不需要通过 value 获取 (Vue 会通过自动给 ref 的值加上 .value)。

3.在 js 中使用 ref 的值必须使用 .value 获取。

复制代码
<template>
    <div>{{count}}</div>
</template>    
<script>
  import {ref} from 'vue'

    export default {
        setup(){
            const count = ref(10)
            console.log(count.value)     // 10  
        }
    }
</script>        
复制代码

4.若使用ref定义复杂类型数据,则监听不到数据的变动

复制代码
实际是走了reactive (const convert = (val) => isObject(val) ? reactive(val) : val)
<script>
  import {ref, watch} from 'vue'

    export default {
        setup(){
            const arr = [1,2,3]
            setTimeout(() => {
               arr.value[0] = 0
            }, 1500)
            watch(arr, (nelVal) => {   // 监听不到arr的变化
       
            })
        }
    }
</script>        

      
复制代码

 5.ref函数的实现

复制代码
(1)craeteRef 创建ref对象(将基本数据类型转为复杂数据类型)
 function createRef(rawValue, shallow = false) {
    if (isRef(rawValue)) {
        return rawValue;
    }
    return new RefImpl(rawValue, shallow);
 }
(2)RefImpl 类(如果传递 shallow = true 则只是代理最外层)
  class RefImpl {
    constructor(value, _shallow = false) {
        this._shallow = _shallow;
        this.__v_isRef = true;
        this._rawValue = _shallow ? value : toRaw(value);
        this._value = _shallow ? value : convert(value); // const convert = (val) => isObject(val) ? reactive(val) : val;
    }
    get value() {    // value 属性访问器
        track(toRaw(this), "get" /* GET */, 'value');
        return this._value;
    }
    set value(newVal) {  // value 属性设置器
        newVal = this._shallow ? newVal : toRaw(newVal);
        if (hasChanged(newVal, this._rawValue)) {    // 判断新老值是否有变化,改变就更新值,trigger 触发依赖执行
            this._rawValue = newVal;
            this._value = this._shallow ? newVal : convert(newVal);
            trigger(toRaw(this), "set" /* SET */, 'value', newVal);
        }
    }
}  
复制代码

 

  来源:https://www.cnblogs.com/zhaoyd2013/p/15128563.html


相关教程