zoukankan      html  css  js  c++  java
  • vue3.0提前了解系列----一些高级的用法和api

    大家好,首先先道个歉。有三个api还不太清楚是怎么回事。所以这次分享少分享三个API  事后等我搞清楚了我在增加上

    欠三个api:

    shallowReactive

    shallowReadonly

    shallowRef

    这三个记录下,下面开始正题:

    customRef

    这个api是用来显式控制其依赖项跟踪和更新触发,这么说可能有人不理解,说简单点吧,就是你可以控制你视图更新时间,以及动态控制你动态处理设置值(比如后面增加一段话)

    <p> 自定义ref : {{ testCustom }} </p>
    <button @click = "getRef">
      获取ref值
    </button>
    <button @click = "setRef">
      设置ref值
    </button>
    
    
    
    
    import { customRef } from 'vue'
    setup () {
        // 显式控制其依赖项跟踪和更新触发
        function customRefTest(value) {
          return customRef((track, trigger) => {
            return {
              get() {
                track()
                return value
              },
              set (newValue) {
                value = newValue + '自定义ref'
                setTimeout(() => {
                  trigger()
                }, 10000)
              }
            }
          })
        }
        const testCustom = customRefTest(0)
        const getRef = () => {
          console.log(testCustom.value)
        }
        const setRef = () => {
          testCustom.value = '设置ref值'
        }
    }

    顺便贴一下官网的demo,一个节流的输入框双向数据绑定

    <template>
      <div>
        <input v-model="text" />
        {{ text }}
      </div>
    </template>
    <script>
    import { customRef } from 'vue'
    function useDebouncedRef(value, delay = 200) {
      let timeout
      return customRef((track, trigger) => {
        return {
          get() {
            track()
            return value
          },
          set(newValue) {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
              value = newValue
              trigger()
            }, delay)
          }
        }
      })
    }
    
    export default {
      setup() {
        return {
          text: useDebouncedRef('hello')
        }
      }
    }
    </script>
    <style scoped>
      
    </style>

    markrow

    标记对象,使其永远不会转换为代理。返回对象本身

    {{ a }}
    <button @click = "setFoo">
       设置foo值
    </button>
    
    
    
    
    import { markRaw, reactive, isReactive } from 'vue'
    const foo = markRaw({
       a: 10
    })
    const state = reactive(foo)
    console.log(isReactive(state)) // false
    const setFoo = () => {
       state.a++
       console.log(foo)
    }

    注意,说明一下这里我点击这个button,视图是不会改变的,始终显示10。但是js中直接输出是最新的值

    toRaw

    返回一个代理对象(包含只读代理对象)的原对象,可用于临时读取,而不会触发代理访问和跟踪的一个开销。引用vue官网原话:返回反应或只读代理的原始对象。这是一个转义填充,可用于临时读取,而不会引起代理访问/跟踪开销或写入而不会触发更改。不建议保留对原始对象的持久引用。小心使用。

    import { markRaw, reactive, toRaw }
    const foo = markRaw({
      a: 10
    })
    const state = reactive(foo)
    const toRawTest = reactive(fooTest)
    const setShallowReactive = () => {
      console.log('toraw测试' + (toRaw(toRawTest) === fooTest)) // true
      console.log('toraw测试2' + (toRaw(state) === foo)) // true
    }

    render函数 && jsx

    基本和vue2没什么太大区别,都是一样的用法,只不过不需要使用render函数,但是需要从vue中导入一个h

    import { h, ref } from 'vue'
    export default {
      setup() {
        const msg = ref(1)
    
        return () =>h('h1', [msg.value])
      }
    }

    至此,compositionapi所有用法已经基本可以告一段落,下一次为大家分享内容大概为:Fragments、Suspense以及Multiple v-models、和Portals组件,都是一些小用法的改变,请期待吧

  • 相关阅读:
    BestCoder6 1002 Goffi and Squary Partition(hdu 4982) 解题报告
    codeforces 31C Schedule 解题报告
    codeforces 462C Appleman and Toastman 解题报告
    codeforces 460C. Present 解题报告
    BestCoder3 1002 BestCoder Sequence(hdu 4908) 解题报告
    BestCoder3 1001 Task schedule(hdu 4907) 解题报告
    poj 1195 Mobile phones 解题报告
    二维树状数组 探索进行中
    codeforces 460B Little Dima and Equation 解题报告
    通过Sql语句控制SQLite数据库增删改查
  • 原文地址:https://www.cnblogs.com/jinzhenzong/p/12865393.html
Copyright © 2011-2022 走看看