Composition API

Composition API

1. vue.js 2.x 通过 new Vue() 创建实例，Vue.js 3.x 通过 createApp() 创建应用实例。

   const app = createApp({
   	data() {
   	
   	}
   })
   app.mount('#app')			// 相当于 2.x 的$mount()
   

2. setUp() 是 composition API的入口

   const app = createApp({
   	setup() {
   		// 第一个参数： props, 它是响应式对象，不能被解构
   		// 第二个参数： context， attrs、emit、slots
   		
   	} 
   })
   

   setup() 返回一个对象，可以使用在 模板、methods等中

   setup() 在实例创建之前执行的，它内部无法使用 this, data, methods， computed 等的内容

3. reactive() 用于将一个对象转成响应式对象，其嵌套属性也都是响应式对象。

生命周期钩子函数

与vue.js 2.x相比， beforeCreate | created 不再需要，换成 setup()。 其他只需要在前面加 “on”.

如 onMounted() 可以写在 setup() 中，等 mounted() 挂载完毕后执行。

reactive() | toRefs() | ref()

这三个函数都是创建响应式数据的。

reactive() 创建的响应式对象，通过解构后只是普通的变量，不再具有响应性。

toRefs() 接收一个代理对象作为参数，将其属性的值都转为响应式对象，然后挂载到新创建的对象上，再返回新创建的对象。所以解构后依然是响应式的，解构的值是对象，它在模板中使用可以省略 value, 代码中不可以省略。

ref() 将普通数据转换为响应式对象，reactive() 是将对象转换为响应式数据。ref 使用时，模板可以省略 value, 但代码中不可省略。解构后也是响应式的。

computed 计算属性

1. 第一种用法

   computed(()=> count.value + 1 )
   

   传入一个获取值的函数，函数内部依赖响应式的数据。computed 返回一个不可变的响应式对象。

2. 第二种用法

   const count = ref(1)
   const plusOne = computed({
   	get: () => count.value + 1,
   	set: val => {
   		count.value = val -1
   	}
   })
   

   传入一个响应式对象，有 getter 和 setter ,返回一个不可变的响应式对象。

watch（）

watch 的三个参数：

1. 参数一： 要监听的数据。
   1. vue.js 2.0 是字符串， 3.0 是对象
2. 参数二： 数据变化后执行的函数，函数参数为新值和旧值
3. 参数三：选项对象， deep 和 immediate

watch 的返回值：

1. 取消监听的函数

watchEffect

它是watch的简化版本，接收一个函数作为参数，监听函数内响应式数据的变化。

返回一个函数，用于取消监听。