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

组合式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. 多用混入等其他手段

就不多说了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue3.0--组合式API
    setup setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。 调用时...
    裘马轻狂大帅阅读 1,654评论 0赞 0
  • Vue3常用API总结
    因为这个月的月初给自己定了个小目标，学完Vue3的基本使用，并使用Vue3亲手做一个小项目（稍微透露一下，我制作的...
    1kesou阅读 4,794评论 0赞 8
  • Vue3.0 新特性探索
    Vue3官网文档[https://vue3js.cn/docs/zh/guide/introduction.htm...
    一苏沨来阅读 3,330评论 0赞 7
  • Vue学习知识点总结
    Vue讲解 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层...
    艾曼大山阅读 11,787评论 7赞 109
  • 让我们一起愉快地学习vue3.0吧
    重构了虚拟DOM setup是干啥的？setup实际上是一个组件的入口，它运行在组件被实例化时候，props 属性...
    微芒不朽阅读 741评论 0赞 0