vue3学习
create-vue脚手架创建项目
创建命令: npm create vue@latest
项目目录和关键文件
vs-code安装 vue3插件
组合式API- setup选项
1、执行时机,比beforeCreate还要早
2、setup函数中,获取不到this (this是undefined)
3、数据 和 函数,需要在 setup 最后 return,才能模板中应用
是不是觉得每次都要return太麻烦,有没有简单写法?当然有
组合式API- reactive和ref函数
reactive->对象类型
ref: 接收简单类型 或 复杂类型,返回一个响应式的对象
1、脚本中访问数据,需要通过 .value
2、在template中,.value不需要加 (帮我们扒了一层)
组合式API- computed
组合式API- watch
侦听单个数据
侦听单多个数据
组合式API- 生命周期函数
组合式API- 父子通信
父组件传个静态值给子组件
动态传值
组合式API–子传父
组合式API- 模版引用
概念:通过 ref 标识获取真实的dom对象或者组件实例对象
比如下面获取dom对象:
再比如获取组件里面数据或方法,先在子组件进行defineExpose暴露,不然父组件是拿不到的
接下来就可以在父组件中获取了
组合式API- provide和inject
作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信
跨层传递普通数据
1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数据
顶层组件向底层组件传值
顶层组件,通过 provider向底层组件传值
App.vue引入了中间层,中间层引入了底层,可以直接在底层组件通过 inject 获取App.vue组件传过来的值
顶层组件向底层组件传方法
比如说底层组件要更新count的值,那么必须底层来触发,顶层来更新(因为count是在顶层定义的嘛)