标签：nbsp reac lang mic 利用 this get rop param
学习Vue3.0也有一段时间啦，现在就是整理下关于Vue3.0，
假期在家 打完麻将 晚上用1-2个小时看下代码然后整理下，说实在的，真的完全太喜欢春节了，好了
先看下关于Vue3.0的知识点吧
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 {} }
vue3中组件实例结构如下，各个选项中的this实际上是ctx或proxy
值得注意的是： setup()执行的时间点是很早的，甚至早于created，因此foo和bar的访问如果没有特意放到onMounted里面会没有
不能用this.$emit()派发事件了，但是提供了方法：
setup() { getCurrentInstance().emit(‘ooxx‘) }
所以我们要用到setup函数的第二个参数：
setup(props, ctx) { ctx.emit(‘ooxx‘) }
当然，还能把emit直接解构出来使用更方便：
setup(props, { emit }) { emit(‘ooxx‘) }
reactive和ref之间做选择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 }
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(() => {}) }
用了点春节假期时间整理下关于composition API， 2021 要加油呀 哈哈
标签：nbsp reac lang mic 利用 this get rop param
原文地址：https://www.cnblogs.com/yf-html/p/14407136.html
