项目笔记
最近在做一个新的电商项目啦,然后要学很多新知识,怕忘记所以用这个记录一下!
学习新的工具:vite /vit/
也是一个脚手架工具,不过比vue-cli更加轻量
注意安装完以后一定要npm i
选项API和组合API
我之前写的就是选项API,方法写在methods里,计算属性写在computed里,其实缺点挺明显的,就是实现一个功能的代码十分的分散,有时候很不好找。
接下来要学习的就是组合API
setup函数
1、可以理解为beforeCreate钩子执行前执行,组件实例创建之前执行,所以不能使用实例，不能用this，拿不到。但是在其他地方可以拿到。
2、模板中需要的数据和函数，需要在setup中返回
测试一下：
返回数据，必须要return出去
vue3.x是不建议使用vue2.x的钩子函数的
用刚刚的方法写出来的数据,并不像之前的data中的响应式数据,所以现在要学习一种方法去改变数据。
reactive函数
reactive是一个函数，可以定义一个复杂数据类型，成为响应式数据。
通常用来定义响应式对象数据
toRef函数
toRef是函数,转换响应式对象中某个属性为单独的响应式数据,并且值是关联的
使用场景: 有一个响应式对象数据,但是模板中只需要使用一项数据
注意: 从响应式数据对象中解构出来的属性数据,不再是响应式数据
测试一下:
我们打印出了name,发现它是一个响应式对象,数据就存放在value中,所以我们修改值的时候应该修改的是name.value
这样依旧可以修改成功,且是响应式的
toRefs
toRefs是函数,转换响应式对象中所有属性为单独响应式数据,对象为普通对象.
使用场景: 剥离响应式对象,想使用响应式对象中的多个或者所有属性作为响应式数据.其实就是为了方便写,不用obj. 直接写属性就可以
但是上面的方法还是很麻烦的,我们可以在一开始就把想要用的数据定义为响应式的,就不用那么麻烦了
ref
ref函数一般用于简单类型数据
在模板中使用ref声明的响应式数据,可以省略value
总结: 在明确知道想要的数据是对响应式数据时,使用reactive,不确定时一概使用ref。
computed
计算属性也有点区别,过去我们是把所有要计算的东西全部放进computed里面的,现在是需要computed的时候直接调用就可以了,而且还是响应式的.
高级用法:假如我们计算属性的值想要和v-model双向绑定,实现响应式,就不能按照上面的方法写,而要使用get函数
watch函数
watch函数,是用来定义侦听器的
第一个参数为监听目标,第二个参数就是改变后触发的函数
这是最基本的使用
监听多组数据就用数组包裹起来
如果我们想监听对象中某一个属性的变化,例如obj.name,还能用上面的方法吗
可见是会报错的
此时需要写成一个函数,其实也就相当于计算属性,返回该属性
假如有时候深层数据监听不到,需要在第三个参数的位置增加一个配置对象{deep:true}, 如果想要watch函数默认执行, 那就增加属性immediate: true, 写法如下:
ref属性
获取单个DOM或组件
vue2.0版本获取单个元素和v-for组件
vue3.0版本获取单个元素
注意中间有导入,没截下来
变得好麻烦,有点不适...
vue3.0获取v-for遍历的DOM或者组件
但是这种情况不多,第一种情况较多
父子通信
之前我们的父传子就是用props,但是在vue3.0中,假如我们在获取到父组件传过来的数据时想要先进行处理该怎么做呢,在setup中怎么拿到props里面的数据呢?
父传子
setup传参props
子传父
子传父的当时也有些变化，使用setup的第二个参数，父组件照常接收就可以了
依赖注入
使用场景: 有一个父组件,里面有子组件,孙组件...很多后代组件,都想要共享父组件的数据,此时可以使用依赖注入,虽然以前的事件总线$bus也可以实现,但是还是比较麻烦的
provide&inject
现在我在父组件定义了100元
现在我有一个子组件,子组件里还有个子组件,相对于App.vue来说就是孙组件了,我现在想要在孙组件中获取到money的值
这个方法确实要比事件总线方便很多
孙组件不能自己修改money的值，遵循单向数据流原则,谁定义谁修改。但是总是会有这种需要,这种情况该如何修改。
App.vue
注意修改的是money.value!!!
Grandson.vue
一些补充:
vue3.0的model语法糖从:value变成了:modelValue
后面开始写项目啦,用的还是vue-cli