美文网首页vue
Vue 3的组合式API以及ref语法糖学习

Vue 3的组合式API以及ref语法糖学习

作者: microkof | 来源:发表于2021-01-03 22:42 被阅读0次

    组合式API与配置项式API混合使用注意事项

    • 混合使用的话,setup(props, context) {}应作为一个配置项API的一个配置项,然后将它视为Vue 2的beforeCreate周期,在注册components和props之后、在其他配置项加载之前执行。

    • 有人说setup(props, context) {}也可以视为created周期,你最好别这么视为,这会引起很多误解。

    • setup(props, context) {}所return的数据和方法如果与其他配置项的数据和方法重名,以setup() {}为准。无论书写顺序,其他配置项都无法覆盖setup(props, context) {}的数据和方法。

    • 混合使用的话,不可以使用ref语法糖。

    • import { reactive, ref, watch } from "vue"里面的这些方法可以在配置项API里使用,但是通常意义不大,因为配置项API基本沿用Vue 2的写法(有些区别,见官方文档迁移办法)。

    setup(props, context) {}里为何不可用this关键字?

    官方说的很清楚:

    在setup(props, context) {}内部,this不会是该活跃实例的引用,因为setup()是在解析其它组件选项之前被调用的,所以setup()内部的this的行为与其它选项中的this完全不同。

    setup(props, context) {}的this指向window,composition的文档中也没有提到怎么获取组件实例,其实方法是:咱们可以通过getCurrentInstance()这个接口获取Vue实例。

    如何取得Vue实例?

    用getCurrentInstance API,使用方法分2步:

    1. 赋值在顶层:必须在setup顶层执行赋值:
    const instance = getCurrentInstance();
    
    1. 使用在周期钩子里:必须在周期钩子里使用,不得在setup里使用:

    虽然const instance = getCurrentInstance()必须在顶层,但是此时获取不到上下文,必须写到onBeforeMount(() => {})或其他周期函数里才能获取上下文。

      setup(props, context) {
        const instance = getCurrentInstance();
        onBeforeMount(() => {
          console.log(instance.data);
        });
      }
    

    如何访问this、配置项的data和methods

    访问组件实例this、配置项data、配置项methods的办法:

    • 使用组件实例this,就用instance.proxy

    • 访问配置项的data,就用instance.data,它具备响应式。

    • 执行配置项的methods,就用instance.ctx.foo()

    向父组件派发事件

    1. setup(props, context) {}常规写法的话,setup的第二个参数就是干这个的:
    setup(props, context) {
      context.emit('ooxx')
    }
    

    或者解构:

    setup(props, { emit }) {
      emit('ooxx')
    }
    
    1. 语法糖写法的话,先const instance = getCurrentInstance();,然后在生命周期钩子或者用户触发事件里写上instance.emit("xxx");即可。

    如何导出解构的Proxy

    如果要解构Proxy,分2种情况讨论:

    1. 如果property是基本类型数据,会丢失响应,这时候应当先const ref = toRefs(Proxy),然后在return里解构ref变量。

    2. 如果你确定Proxy所有一级property的值都是引用类型,可以放心解构Proxy。

    生命周期钩子可以写到函数里

    函数里可以写生命周期钩子,只要函数比周期执行的早就可以:

    function fun1() {
      // 这里可以用onMounted执行代码
      onMounted(() => {})
    }
    

    Ref语法糖

    实现的前提是:首先给script标签加上setup标记,也就是<script setup>,然后,不允许再使用配置项式API。

    不再需要写export default{}

    这很棒。

    原本是:

    <script>
    import {onBeforeMount, onMounted} from 'vue'
    
    export default {
      name: 'App',
      setup() {
          onBeforeMount(() => {
              // 在挂载前执行某些代码
          });
          onMounted(() => {
              // 在挂载后执行某些代码
          });
          return {};
      }
    }
    </script>
    

    现在是:

    <script setup>
    import { reactive, onBeforeMount, onMounted } from "vue";
    const a = reactive({ x: 1 });
    onBeforeMount(() => {
      a.x = 2;
    });
    onMounted(() => {
      a.x = 3;
    });
    </script>
    

    直接向<template>暴露顶层变量

    编译器会自动收集顶层变量,然后return,所以你不需要写return,如果写了反而报错。这很棒。

    有些变量在template里用不到,此时的最佳实践:

    1. 尽量避免定义这种变量

    2. 给这种变量的变量名前面写上下划线,表明是私有变量

    <template>
      <div>
        <button @click="r.b.c++">count is: {{ r.b.c }}</button>
      </div>
    </template>
    
    <script setup>
    import { reactive } from "vue";
    
    let r = reactive({ a: 1, b: { c: 2 } });
    </script>
    

    ref标签

    ref: t = 10;约等价于let t = ref(10),依然有些区别,先看例子:

    ref: t = 10;
    console.log(t); // 10
    console.log(t + 1); // 11
    console.log(t.value); // undefined
    console.log($t); // ref对象
    console.log($t + 1); // [object Object]1
    console.log($t.value + 1); // 11
    

    也就是说,声明ref: t = 10之后:

    • t返回ref对象的内部值,而不是ref对象本身
    • t.value返回undefined
    • t前加$符号返回ref对象
    • $t.value返回内部值
    • t对于template来讲是ref对象

    这个ref:标签是社区最大的争议点,它的好处是你可以在js里把t当做内部值来随意运算,而template也自动把它当做ref对象。当你需要在js里调用ref对象的时候,你可以用$t,虽然加$也是一种心智负担,但是这种需求概率太低了,因为你极少需要获取ref对象。这就是Vue创始人推荐使用ref:标签的理由。

    我建议尽量使用ref:标签,除非你真的很讨厌这种语法糖。

    使用<script setup>标签,如何获取props和context?

    没使用<script setup>标签的时候,setup(props, context) {}自带参数用来获取props和context,现在setup(props, context) {}已经省略了,如何获取props和context呢?

    1. 使用useContext获取context

    useContext()返回的内容跟不用<script setup>标签时候setup(props, context) {}的context的返回内容完全一致。

    console.log(useContext());
    

    2. 使用defineProps接收props

    defineProps({
      msg: String
    })
    

    或:

    defineProps({
      msg: {
        type: String,
        default: ''
    })
    

    3. 借助useContext使用props

    const ctx = useContext();
    console.log(ctx.props);
    

    4. 允许直接修改props

    Vue 2中不允许直接修改props,得用this.$emit,但是Vue 3允许直接修改,只不过修改的是组件内props的值,并不会影响父组件的传入值。

    有时候直接修改props很有用,比如父组件将ajax的结果数据给子组件,子组件修改数据并不需要通知父组件,父组件也没兴趣知道修改成什么,这时候子组件直接修改数据即可。

    5. 不要解构props

    最好不要解构props,也就是说最好分开传入props,如果props的property是基本类型数据,会导致响应式丢失,对它的修改会反映不到DOM上。

    在setup中调用store

    在Vue2中使用 Vuex,我们都是通过this.$store来与获取到Vuex实例,但上一部分说了原本Vue2中的this的获取方式不一样了,并且我们在Vue3的getCurrentInstance().proxy中也没有发现$store这个属性,那么如何获取到Vuex实例呢?这就要通过vuex中的一个方法了,即useStore

    // store 文件夹下的 index.js
    import Vuex from 'vuex'
    
    const store = Vuex.createStore({
        state: {
            name: '王XX',
            age: 18
        },
        mutations: {
            // ……
        },
        // ……
    })
    
    // example.vue
    <script>
    // 从 vuex 中导入 useStore 方法
    import {useStore} from 'vuex'
    export default {
        setup() {   
            // 获取 vuex 实例
            const store = useStore()
    
            console.log(store)
        }
    }
    </script>
    

    然后接下来就可以像之前一样正常使用vuex了。

    如何避免用配置项思维编写组合式代码?

    有人说,很多人编写组合式API依然习惯用配置项思维,最终还是会形成data区域、computed区域、周期钩子区域、methods区域等。如果赶上“随缘”性格的程序员,他会连区域都不分,只会东一榔头西一棒槌式的随意编写,使用组合式API反而更乱。

    其实,这不是组合式API的锅,因为任何编程方式都有最佳实践一说:

    1. data方面

    忘记古老的var时代的最佳实践。在古代,var声明的变量存在变量提升现象,为了防止愚蠢的程序员出了bug还搞不清为什么出bug,所以最佳实践建议var声明变量永远写在作用域最顶部。现在是let时代,并不需要这种最佳实践,所以应该就近声明变量。这样也就不会有所谓“data区域”了。

    计算变量也是同样道理。

    1. 周期钩子方面

    因为现在可以叠加设置周期钩子,相信很少有蠢人会只定义一个钩子。

    钩子应紧随业务,不要在本业务的钩子里写其他业务的内容。

    1. methods方面

    methods的本质就是函数,函数声明也应做到就近声明,就近使用,千万不要把函数故意提升到作用域顶部。

    1. 公用代码方面

    应当放在顶部,这是起码的最佳实践。

    1. 拆分组件

    你一个组件5千行,你还不拆分,你要作死啊?

    1. 多用混入等其他手段

    就不多说了。

    相关文章

      网友评论

        本文标题:Vue 3的组合式API以及ref语法糖学习

        本文链接:https://www.haomeiwen.com/subject/xbaznktx.html