阅读量:0
目录
01 setup 函数
vue3推出了setup函数,用作所有数据的初始化的函数,一切数据都定义到setup函数里面
setup函数必须对外暴露一个对象 ,对象里面写你想要使用的数据
在setup函数里面直接返回的数据 只能用作渲染 不能修改 因为没有双向数据绑定的效果
setup函数内部没有this,因为这个函数执行的时候 当前组件还没有初始化成功
setup函数是在组件初始化之前执行的 他返回的数据和函数可以在模板中使用
但是还没有双向数据绑定的效果
02 vue3的生命周期函数
vue3的生命周期函数有七个 分别是
setup创建实例前,
onBeforeMount 挂载dom前,onMounted 挂载dom后,
onBeforeUpdate更新组件前,onUpdated更新组件后,
onBoforeUnmount卸载销毁前,onUnmounted卸载销毁后
vue3的生命周期函数 需要在setup函数里面定义 参数传入回调函数 进行执行
需要使用哪个钩子函数,就需要从vue中解构引入进来
vue3钩子函数 可以调用多次 不会被覆盖 都会执行 目的是为了分模块封装
03 reactive 函数
reactive是一个函数,它可以定义一个复杂数据类型, 成为响应式数据
使用步骤:
1.import { reactive } from 'vue'
2.在setup函数里面定义reactive对象, 对象内部包含每个数据
3.最后setup函数把reactive函数的值作为返回值返回
4.页面最后就可以使用reactive里面的数据了
reactive 函数的参数的对象里面 可以定义数据和事件驱动函数
事件驱动函数可以修改当前reactive里面的数据 具有双向数据绑定的效果
04 toRef 函数
toRef函数可以把reactive里面的某个数据单独拿出来 并且依然保持双向数据绑定的效果
使用步骤:
1.引入 toRef 函数
2. let 取出的变量 = toRef(要取出数据的reactive对象,'取出的数据变量名')
通过toRef取出的数据 页面中也可以直接使用
在方法中使用需要通过value属性 获取值和修改值
05 toRefs 函数
toRefs函数可以把reactive里面的数据都拿出来,使用...扩展运算符来展开数据,
使用toRefs展开的数据可以直接使用,不用加对象名.
不使用toRefs,直接使用...扩展运算符展开的reactive数据 没有双向数据绑定的效果
06 ref 函数
reactive能够定义复杂数据类型的数据为响应式数据
ref 能够定义基本数据类型的数据为响应式数据
ref 函数 修改值的时候或者获取值的时候(js操作) 需要.value
在mustache语法中使用的使用可以省略.value
ref 也可以定义复杂数据类型为响应式数据
使用场景:
当你明确知道需要的是一个响应式数据是对象, 那么就使用reactive即可,
其他情况使用ref
07 ref 属性
vue2通过标签的ref属性 可以获取当前节点的dom对象
如果ref定义在自定义组件上面 可以获取该组件的对象
this.$refs.ref的值 获取dom节点对象或者子组件对象
vue3获取页面dom的步骤:
1.在setup函数里面使用ref(null) 返回一个空节点对象
2.在setup函数里面 return 返回的数据里面需要包含这个数据
3.在页面标签上面 定义ref属性 等于setup返回的这个ref响应数据名称
4.在onMounted钩子函数里面 就可以通过这个变量名.value获取节点对象
如果有多个标签都定义同名的ref 那么会出现覆盖的问题
如果想要通过ref属性 一次性获取一堆元素
那么 就得通过函数遍历 定义一个函数 暴露给模板使用
标签上面 :ref="这个函数名" 这个函数自动被遍历
函数的参数是每次遍历到的元素 自己可以选择存放到指定数组里面
08 computed 计算属性
定义计算属性 通过computed函数定义
基本使用:
let 计算属性 = computed(()=>{
调用时里面传一个回调函数,回调函数的返回值就是当前计算数据的变量
return 值;
})
高级使用
let 计算属性 = computed({
get(){ 返回当前计算属性应该计算出来的值 },
set(){ 在计算属性的存值器里面修改 相关的变量的值 }
})
