Vue3笔记_＜入门基础篇＞

目录

Setup语法糖

ref:定义一个数据的响应式

reactive:定义一个对象类型的响应式数据

toRef()

toRefs()

计算属性

watchEffect函数

生命周期

Vue3获取Dom

Props

Vue3 自定义事件

---

Setup语法糖

setup是一个专门用于组合式API的特殊钩子函数，只在初始化时执行一次。

setup有两种返回值:

1. 对象。 对象中的属性，方法在模板中都可以直接使用
2. 函数。 自定义渲染内容，覆盖模板内容

 注：不要与Vue2配置混用

• Vue2配置中:{data,methods,computer}中可以直接访问setup中的属性和方法
• 在setup中不能访问Vue2的配置 { data , methods , compoter... }
• 如果变量或函数出现重名，setup内的数据优先

注意

• 在setup语法糖里面，this指向是undefined，this.任何变量都无法获取值。setup是一个独立的封装函数

• steup简写语法里面，不需要自己写async，当出现await时会自动在setup内部出现，但是带有async setup()的组件必须嵌套在中才能呈现。

 setup的细节

1. setup(props,context) || setup(props,{attrs,slots,emit})
2. props：值为对象，包含组件外部传递过来的，且组件内部声明接收了的属性。父给子传了参数，子没有接收就会报错。父没有传参数，子接收了就是undefined
3. context:上下文对象，里面是三个值分别如下
4. attrs：值为对象，包含组件外部传递过来的，但没有在props配置中声明的属性，相当于 this.$attrs。attrs就像vue2的$attrs是个捡漏的，传过来的参数没有被props接收，都会到attrs里面去
5. emit：用来分发自定义事件的函数，相当于 this.$emit。用来触发父元素传给子元素的事件
6. slots：收到的插槽内容，相当于 this.$slots

setup不能是一个async函数。一个函数如果被async修饰了，那么返回的就不再是一个普通对象，而是被promise包裹的对象，模板中看不到return对象中的属性

---

ref:定义一个数据的响应式

语法:
import ref from 'Vue'
const xxx = ref(initValue); RefImpl 引用的实现的实例对象

 说明

• JS中操作数据：xxx.value
• 模板中操作数据:不需要.value，因为浏览器解析的时候已经把value给解析了
• 用ref包括的基本类型数据是RefImpl的实例对象

 注意

• 在vue3中，想把普通的number,string,bollean编程响应式的数据，就必须要借助ref
• ref定义对象类型的数据，底层原理是利用了ES6的proxy实现的响应式，而在vue3中，对proxy的操作封装在了一个叫reactive的新函数中。
• Vue3中ref响应式仍然是通过 Object.defineProperty()的getter和settrer拦截来实现 .value

---

reactive:定义一个对象类型的响应式数据

语法：
import { reactive } from 'vue'
const proxyObj = reative(obj);
接收一个普通对象或数组，然后返回一个响应式代理对象

说明

• 定义的响应式数据是深层的：会影响对象内部所有嵌套的属性(递归深度响应式)
• reactive响应式底层原理是基于ES6的proxy实现
• reactive只能处理对象或数组，处理其他类型数据会报错

reactive与ref的区别

1. ref:定义基本类型数据响应式，得到的是:RefImpl的实例，引用对象.value
2. reactive:定义复杂类型响应式数据，得到的是Proxy的实例，代理对象：变量名.属性名（下标）即可

3. ref处理对象或数组的时候，内部借助了reactive函数来实现响应

4. reactive只能处理对象或数组，处理其他类型数据会报错

5. reactive核心是对ES6的proxy进行了封装

---

toRef()

toRef是函数：转换响应式对象中某个属性为单独响应式数据，并且跟原来的数据的值是关联的

语法:
import toRef from 'vue'
第一个值是响应式对象，第二个值是在obj下需要独立出来的数据的属性名
let name = toRef(obj,'name')
独立出来的数据跟原来的对象是保持联系的，name发生了改变，obj里的name也会发生改变
toRef独立出来的数据类型是refImpl。改变数据的方法：name.value = '老铁'

---

toRefs()

toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象转为普通对象，并且值是关联的

---

计算属性

Vue3的计算属性完全可以提取到单独的文件里去处理，处理完再引入

原理

使用与封装

在utils文件夹下
import { computed } from 'vue'
export function TextComputed(val){
    const str = computed(()=>{
        return val.split('').reverse().join('')
    })
    return str
}

---

watchEffect函数

watch的作用：即要指明监听的属性，也要指明监视的回调

watchEffect的作用：

1. 不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性
2. 默认初始时就会执行第一次，从而可以收集需要监视的数据

类似计算属性

1. 计算属性需要返回值
2. 而watchEffect，没有返回值，是监视到变化之后，做说明逻辑处理

3. 计算属性是注重计算结果，监听器是注重计算过程

watch函数：

watchEffect函数：

import { ref , reactive ,watch,watchEffect } from 'vue'
watchEffect(()=>{
    const h = counst.value
    const n = number.value
    console.log('watchEffect 被调用了')
})

watch监听reactive的一些坑（很重要）

---

生命周期

注意: 

1. 选项式API中出现两个同名钩子函数，后面的会覆盖前面的
2. 组合式API中出现两个同名钩子不会覆盖会按顺序执行依次执行

---

Vue3获取Dom

---

Props

作用:子组件内使用defineProps来接收参数，不需要引入就可以使用

上面是父组件

下面是子组件

---

Vue3 自定义事件

通过defineEmite宏来声明需要抛出的事件。和defineProps类似，defineEmits仅可用于 上面为父组件 下面为子组件