Vue3 learn

1、setup比beforceate先执行

2、reactive

reactive()
作用：接收对象类型数据的参数传入并返回一个响应式的对象

3、ref()

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

reactive与ref函数的共同作用：用函数调用的方式生成响应式数据

reactive VS ref

• reactive不能处理简单类型的数据
• ref参数类型支持更好，但是必须通过.value访问修改
• ref函数的内部实现依赖于reactive函数

4、computed属性

• 计算属性中不应该有副作用（比如异步请求/修改DOM）
• 避免直接修改计算属性的值（计算属性应该是只读的）

5、watch

// watch侦听单个数据源
watch(count, (newVal, oldVal) => {
  console.log('count变化了', newVal, oldVal);
})

immediate

说明：在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调

// watch侦听单个数据源
watch(count, (newVal, oldVal) => {
  console.log('count变化了', newVal, oldVal);
}, {
  immediate: true
})

deep 有性能损耗

默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

 1. 作为watch函数的第一个参数，，ref对象需要添加.value吗？
	不需要，watch会自动读取
 2. 不开启deep，直接修改嵌套属性能触发回调吗？
 	不能，默认是浅层侦听
 3. 不开启deep，想在某个层次较深的属性变化时执行回调怎么做？
 	可以把第一个参数写成函数的写法，返回要监听的具体属性

6、父传子

1.父传子的过程中通过什么方式接受props？
	defineProps({属性名：类型})
2.setup语法糖中如何使用父组件传过来的数据？
	const props = defineProps({属性名：类型})

7、子传父

1. 子传父的过程中通过什么方式得到emit方法？
	defineEmits(['事件名称'])

8、defineExpose()

默认情况下在语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问

// 父组件
definExpose({
	name,
	setName
})

1.获取模板引用的时机
	组件挂在完毕
2.defineExpose编译宏的作用是什么？
	显式暴露组件内部的属性和方法

9、provide和inject

1.provide和inject的作用是什么？
	跨层组件通信
2.如何在传递过程中保持数据响应式？
	第二个参数传递ref对象
3.底层组件想要通知顶层组件做修改，如何做？
	传递方法，底层组件调用方法
4.一颗组件树中只有一个顶层或底层组件吗？
	相对概念，存在多个顶层和底层的关系