|
|
- 没有 this了，我要怎么获取组件实例？
- 没有 this了，怎么派发自定义事件？
- 我该如何在 reactive和 ref之间做选择？
- setup函数太长了怎么办？
- 我的属性怎么就不响应了
- watchEffect和 watch有啥不同？
- 生命周期钩子能不能写多个？顺序是怎样的？
我要怎么获取组件实例？ 我们都知道composition api是可以和options api一起使用、友好相处的，比如下面的示例：
const { createApp } = Vue
createApp({
data() {
return {
foo: 'foo'
}
},
setup() {
// 没有this，我该如何获取data中的foo和methods中的bar哪？
return { }
},
methods: {
bar() {
console.log('我是bar方法');
}
},
}).mount('#app')
|
但是setup里面this指向window，composition的文档中也没有提到怎么获取组件实例呀，这着实难住了不少小伙伴，方法自然是有的：咱们可以通过getCurrentInstance()这个接口获取组件实例：
setup() {
// getCurrentInstance()可以获取组件实例
const instance = getCurrentInstance()
console.log(instance);
onMounted(()=>{
// 组件实例的上下文才是我们熟悉的this
console.log(instance.ctx.foo); // 'foo'
console.log(instance.ctx.bar()); // '我是bar方法'
})
return {}
}, |
但是很快我们又蒙圈了，这个组件实例和我们以前熟悉的 this不一样，直接访问 this.foo还是找不到数据。
vue3中组件实例结构如下，各个选项中的 this实际上是 ctx或 proxy
当然坑还是有的，你仔细观察这个ctx，发现它不是一个Proxy对象，也就是这位兄台只有值却没有响应性，所以如果要利用响应特性，还得用proxy这个属性返回上下文对象，如果只是想要数据，上图中不是有个data也是Proxy类型的嘛。
setup() {
const { proxy, data } = getCurrentInstance()
// 想要利用响应能力，就要使用proxy这个上下文
watchEffect(() => {
console.log(proxy.foo) // foo变化会有输出
console.log(data.foo) // foo变化会有输出
})
}, |
最后大家还要注意，setup()执行的时间点是很早的，甚至早于created，因此foo和bar的访问如果没有特意放到onMounted里面还真没有。
setup() {
const instance = getCurrentInstance()
console.log(instance.ctx.foo); // undefined
console.log(instance.ctx.bar()); // undefined
}, |
怎么派发自定义事件？
突然之间没有this了之后，好像突然生活不能自理了，再也不能用this.$emit()派发事件了。
其实通过组件实例是可以派发事件的，比如：
setup() {
getCurrentInstance().emit('ooxx')
} |
但是这样比较麻烦，所以我们要用到setup函数的第二个参数：
setup(props, ctx) {
ctx.emit('ooxx')
} |
当然，还能把emit直接结构出来使用更方便：
setup(props, { emit }) {
emit('ooxx')
} |
我该如何在reactive和ref之间做选择？ composition-api引入了独立的数据响应式方法reactive，它可以将传入的对象做响应式处理：
const state = reactive({
foo: 'foo',
})
watchEffect(() => {
console.log(state.foo)
})
state.foo = 'foooooo' // 输出 'foooooo' |
这个方式类似于我们设置的data选项，能够解决我们大部分需求。但是也有以下问题：
- 当我们直接导出这个state时，我们在模板中就要带上state这个前缀
setup() {
const state = reactive({})
return { state }
} |
| <div>{{ state.foo }}</div> |
为了解决这个问题又要引入toRefs
setup() {
const state = reactive({})
return { ...toRefs(state) }
}
|
小伙伴们又懵了，toRefs是个啥？为啥不直接展开？
于是就有了 Ref的概念，通过包装单值为 Ref对象，这样就可以对其做响应式代理
setup() {
const foo = ref('foo')
return { foo }
} |
模板中使用还可以省掉前缀，toRefs就是利用这一点将reactive()返回代理对象的每个key对应的值都转换为Ref
但是Ref对象也有副作用：
setup() {
const foo = ref('foo')
setTimeout(() => {
// 额外的value让人恼火
foo.value++
}, 1000)
return { foo }
}
|
- 额外增加的心智负担：一个值到底是不是Ref，我要不要加.value？
setup(props) {
const foo = props.foo
// foo是Proxy还是Ref？
// 编写`watch`方法的时候写法完全不同
// Ref可以被直接watch
watch(foo, () => {})
// Proxy则需要写成函数形式
watch(() => foo.bar, () => {})
} |
对比之后发现都有一些问题，我们来讨论一下两者选择问题：
const counterRef = ref(1)
const usersRef = ref(['tom', 'jerry']) |
一个业务关注点有多个值，建议reactive
const mouse = reactive({
x: 0,
y: 0
}) |
- 降低Ref心智负担的方法：利用unref、isRef、isProxy等工具方法，利用一些命名约定。
setup(props) {
const foo = unref(props.foo) // foo是我们要的值
// 等效于
const foo = isRef(props.foo) ? props.foo.value : props.foo
} |
setup函数太长了怎么办？ 虽然很好的将关注点集中起来，就像下面这样：
但是难免还是太长了（怎么太长还成了困扰？），此时就可以开始函数拆分
setup(){
let { val, todos, addTodo } = useTodo()
let {count,double,add} = useCounter()
let {x, double:doubleX} = useMouse()
return {
val, todos, addTodo,
count,double,add,
x,doubleX
}
} |
return的上下文太长了，我们可以使用vue3的setup script功能，把setup这个配置也优化掉，一个功能export一次
<script setup>
import useCounter from './counter'
import useMouse from './mouse'
import useTodo from './todos'
let { val, todos, addTodo } = useTodo()
export {val, todos, addTodo}
let {count,double,add} = useCounter()
export {count,double,add}
let {x, double:doubleX} = useMouse()
export {x,doubleX}
</script> |
我的属性怎么就不响应了
下面的代码是小伙伴们可能会写出来的：
setup({ foo, bar }) {
watchEffect(() => {
console.log(foo, bar) // foo，bar发生变化，也不会有输出
})
} |
props是一个Proxy对象，直接结构就失去了响应能力，所以对待props要温柔，不能动不动就劈开了
setup(props) {
watchEffect(() => {
console.log(props.foo, props.bar) // foo，bar发生变化，会有输出
})
} |
真想劈开也行，看你喜欢什么姿势了
setup(props) {
const { foo, bar } = toRefs(props)
watchEffect(() => {
console.log(foo, bar) // foo，bar发生变化，会有输出
})
} |
watchEffect和watch有啥不同？ 这俩方法很相似，都是观察响应式数据，变化执行副作用函数，但有如下不同：
watch需要明确指定监视目标,
| watch(() => state.counter, (val, prevVal) => {}) |
watchEffect不需要
watchEffect(() => {
console.log(state.counter)
}) |
- watch可以获取变化前后的值
- watch是懒执行的，它等效于vue2中的this.$watch()，watchEffect为了收集依赖，要立即执行一次
现在知道怎么选择它们了吧？
生命周期钩子能不能写多个？
当然可以写多个，最后它们会按注册顺序依次执行：
setup() {
onMounted(() => {})
onMounted(() => {})
onMounted(() => {})
} |
甚至还能拆分出多个相同生命周期钩子到独立函数中呢，相当帅气
function fun1() {
// 这里可以用onMounted执行代码
onMounted(() => {})
}
function fun2() {
// 这里还可以用onMounted执行代码
onMounted(() => {})
} |
setup() {
fun1()
fun2()
onMounted(() => {})
} |
----------------------------
原文链接:https://www.jianshu.com/p/f0b3e8fc134c
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 flybird 在 2021-06-12 16:49:25 重新编辑]
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → vue3-Composition-API的用法
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
