vue3中如果把变量和函数写在setup外会出现什么后果
1、setup和以前的api(data,methods,computed等)并不冲突,也是可以相互访问的,值得注意的是setup里面不能用this,并且在setup执行的时候组件实例还未创建完毕,故不也能使用data,methods,computed定义的变量和函数。
2、有时副作用函数会执行一些异步的副作用, 这些响应需要在其失效时清除(即完成之前状态已改变了)。所以侦听副作用传入的函数可以接收一个 onInvalidate 函数作入参, 用来注册清理失效时的回调。
3、setup 函数也是 Composition API 的入口函数,我们的变量、方法都是在该函数里定义的,不再使用vue2中的data而是setup。
4、setup()内使用响应式数据时,需要通过.value获取 从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。
vue3.x新特性之setup函数,看完就会用了
setup和以前的api(data,methods,computed等)并不冲突,也是可以相互访问的,值得注意的是setup里面不能用this,并且在setup执行的时候组件实例还未创建完毕,故不也能使用data,methods,computed定义的变量和函数。
setup 函数也是 Composition API 的入口函数,我们的变量、方法都是在该函数里定义的,不再使用vue2中的data而是setup。
一开始的想法是单独监听这个传递的参数,但看了VUE3的文档之后,似乎对参数的监听必须精确到属性。例如参数为 需要在子组件的watch中写明监听的是name还是gender。该参数中有很多可能会改变的属性,一一监听过于麻烦。
Vue3官网 在线源码编译地址 setup 是所有 Composition API 的容器,值为一个函数。
例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。
vue3setup写与不写的区别是更新数据。vue在更新数据了数据是没有更新视图的时候就需要使用set方法了。vue3的配置文件还是和vue0的一样。配置内容和vue0的一样,也就是webpack配置。
Vue3中使用setup监听props
使用 setup 函数时,它将接收两个参数: Props setup 函数中的第一个参数是 props 。
setup 还可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态:新的 setup 组件选项在 创建组件之前 执行,一旦 props 被解析,并充当合成 API 的入口点。
vue2接收props有js方式的接收,也有ts方式的接收。用ts方式的接收的时候,尽量定义类型。通过withDefaluts()来接收。
例如使用父组件传递的props数据时,要引用props的某个属性且要保持响应式连接时就很有用。