组合式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步:
- 赋值在顶层:必须在setup顶层执行赋值:
const instance = getCurrentInstance();
- 使用在周期钩子里:必须在周期钩子里使用,不得在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()
。
向父组件派发事件
-
setup(props, context) {}
常规写法的话,setup的第二个参数就是干这个的:
setup(props, context) {
context.emit('ooxx')
}
或者解构:
setup(props, { emit }) {
emit('ooxx')
}
- 语法糖写法的话,先
const instance = getCurrentInstance();
,然后在生命周期钩子或者用户触发事件里写上instance.emit("xxx");
即可。
如何导出解构的Proxy
如果要解构Proxy,分2种情况讨论:
-
如果property是基本类型数据,会丢失响应,这时候应当先
const ref = toRefs(Proxy)
,然后在return里解构ref变量。 -
如果你确定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里用不到,此时的最佳实践:
-
尽量避免定义这种变量
-
给这种变量的变量名前面写上下划线,表明是私有变量
<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的锅,因为任何编程方式都有最佳实践一说:
- data方面
忘记古老的var
时代的最佳实践。在古代,var
声明的变量存在变量提升现象,为了防止愚蠢的程序员出了bug还搞不清为什么出bug,所以最佳实践建议var
声明变量永远写在作用域最顶部。现在是let
时代,并不需要这种最佳实践,所以应该就近声明变量。这样也就不会有所谓“data区域”了。
计算变量也是同样道理。
- 周期钩子方面
因为现在可以叠加设置周期钩子,相信很少有蠢人会只定义一个钩子。
钩子应紧随业务,不要在本业务的钩子里写其他业务的内容。
- methods方面
methods的本质就是函数,函数声明也应做到就近声明,就近使用,千万不要把函数故意提升到作用域顶部。
- 公用代码方面
应当放在顶部,这是起码的最佳实践。
- 拆分组件
你一个组件5千行,你还不拆分,你要作死啊?
- 多用混入等其他手段
就不多说了。
网友评论