Vue setup函数初识__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
setup函数
setup
是Composition API
表演的舞台
从参数说起,setup
函数接受两个参数props
和context
。
setup(props,context){
}
setup第一个参数props
正如在一个标准组件中所期望的那样,setup
函数中的 props
是响应式的,当传入新的 props
时,它将被更新。但是props
是响应式的,你们不能使用ES解构,他会消除props
的响应式。如果需要解构props
,可以在setup
函数中使用toRefs
来完成解构。
setup(props,context){
const {count} = toRefs(props);// 这样props不会失去响应式
}
setup第二个参数context
context
是一个普通的JavaScript对象,它暴露组件的三个 property,context是非响应式对象,所以可以对它进行安全的解构。
setup(props, { attrs , slots , emit }) {
// Attribute (非响应式对象)
console.log(attrs)
// 插槽 (非响应式对象)
console.log(slots)
// 触发事件 (方法)
console.log(emit)
}
访问组件的 property
执行 setup
时,组件实例尚未被创建。因此,你只能访问以下 property:props
,attrs
,slots
,emit
。
setup的返回值
setup
函数可以有两种返回值,一种是返回一个对象,另外一种是返回一个渲染函数。
//第一种
import {ref} from 'vue'
export default {
setup(){
const count = ref(0)
return {
count
}
}
}
// 第二种
import {ref,h} from 'vue'
epxort default {
setup(){
// 这里返回的渲染函数会覆盖template所表示的内容。
return () => h('h1','hello,vue3.0')
}
}
setup的注意点
setup
函数里面的this
是undefined
。setup
函数不能使用ES6的async
修饰符。setup
函数里面定义变量名如果和vue2.0冲突了,会以vue3.0为主。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 小膏 原文链接:https://juejin.im/post/6987254959918039048