1、setup()
vue3中的composition API中最重要的就是setup办法了，相当于组件的入口，所有的composition API都必须放到setup()中的应用。
setup是在组件实例初始化之前执行的(beforeCreated之前)，是整个组件的入口函数，这个时候数据和办法还没有进行挂载，因而在setup中this并不会执行以后组件实例，也不能通过this获取组件中的数据和办法了。
在模板中应用到的变量和办法必须在setup中return进去，能力应用。
export default { setup(){ let name="张三" return {name}//必须在这里return，模板中能力应用过 }}setup中的参数
下面曾经说过，因为setup是在beforeCreate之前执行的，所以setup中的this并不会指向以后组件实例，this的值为undefined，那么咱们怎么和父子组件通信呢（之前能够通过this.$emit触发）？这时就须要用到setup的参数了。
setup有两个参数，第一个是props，父组件传递给以后组件的prop都在这个参数对象中，第二个参数是上下文context，外面蕴含后attrs,emit,slots，这几个参数的用法就和vue2中的大同小异了，这里不做过多赘述。
2、ref用来定义根底类型的响应式数据
在setup中间接定义的变量不是响应式的，如果须要定义根底类型的响应式变量，须要应用ref来定义
import {ref} from "vue"export default { setup(){ let name = '张三'; setTimeout(() => { name = '李四'; console.log(name);//这里的扭转了，然而视图并不会更新 }, 2000); return { name }; }}import {ref} from "vue"export default { let name = ref('张三'); setTimeout(() => { name.value = '李四'; console.log(name.value); //李四 }, 2000); return { name };} 须要留神的是，通过ref定义的变量，在js中应用的时候须要通过.value来获取或者设置值，然而在模板中应用的时候不须要加.value，vue外部曾经帮咱们解决了。
通过ref获取dom元素或者组件实例
在vue2中要获取dom元素或者组件实例，间接在dom元素或者组件上增加ref="refName"，而后在js中通过this.$refs.refName就能够获取了。在vue3中，应用形式略有不同。
- 间接在dom元素或者组件上增加ref="refName"
- 在setup中定义ref，初始值为null，let refName=ref(null)，留神变量的名字肯定要和dom或者组件上的ref名字保持一致。
- 在js中通过refName.value获取dom元素或者组件实例
- 留神，须要在setup总return应用到的ref变量
<template> <div ref="name">张三</div> <button @click="change">add</button> <hr /></template><script>import { ref } from 'vue';export default { setup() { let name = ref(null); const change = () => { console.log(name.value); name.value.innerText = '李四'; }; return { name, change }; },};</script>3、reactive用来定义援用类型的响应式数据
import { reactive } from 'vue';export default { setup() { let obj = reactive({ name: '张三', age: 18 }); setTimeout(() => { obj.name = '李四'; console.log(obj); //李四 }, 2000); return { obj }; },};在模板中间接通过{{obj.name}}就能够拜访数据了
4、computed计算属性
创立只读的计算属性
import {ref,computed} from "vue"export default { setup(){ let count=ref(0) let newCount=computed(()=>count.value+10) return {count,newCount} }}创立可读可写的计算属性，在computed中传入一个对象，通过设置get和set办法创立可读写的计算属性。
import { ref, computed } from 'vue';export default { setup() { let count = ref(1); let newCount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newCount.value += 100);//给计算属性赋值会触发set return { count, newCount, change }; },}5、watch监听
监听ref类型的单个数据
import { ref, computed, watch } from 'vue';export default { setup() { let count = ref(1); let newCount = computed({ get: () => count.value + 100, set: val => (count.value = val - 1), }); let change = () => (newCount.value += 100); watch(count, (newVal, oldVal) => { console.log(newVal, oldVal); }); return { count, newCount, change }; },};监听ref类型的多个值
import { ref, watch } from 'vue';export default { setup() { let name = ref('张三'); let age = ref(18); setTimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watch([name, age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); //李四 22 console.log(oldName, oldAge); //张三 18 }); return { name, age }; },};监听reactive类型的单个值
import { reactive, watch } from 'vue';export default { setup() { let obj = reactive({ name: '张三', age: 18 }); setTimeout(() => { obj.name = '李四'; }, 2000); watch( () => obj.name, (newVal, oldVal) => { console.log(newVal, oldVal); //李四 张三 } ); return { obj }; },};监听reactive类型的多个值
import { reactive, watch } from 'vue';export default { setup() { let obj = reactive({ name: '张三', age: 18 }); setTimeout(() => { obj.name = '李四'; obj.age = 22; }, 2000); watch( [() => obj.name, () => obj.age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); //李四 22 console.log(oldName, oldAge); //张三 18 } ); return { obj }; },};watch增加配置项
在vue2中watch如果须要增加配置就须要传入一个对象，来配置immediate和deep，在vue3中的watch同样能够在第三个参数里增加配置
import { ref, watch } from 'vue';export default { setup() { let name = ref('张三'); let age = ref(18); setTimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watch( [name, age], ([newName, newAge], [oldName, oldAge]) => { console.log(newName, newAge); console.log(oldName, oldAge); }, { immediate: true, deep: true, } ); return { name, age }; },};6、watchEffect监听
import { ref, watch, watchEffect } from 'vue';export default { setup() { let name = ref('张三'); let age = ref(18); setTimeout(() => { name.value = '李四'; age.value = 22; }, 2000); watchEffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; },};敞开监听
创立监听的时候能够用一个变量来接管watch或者watchEffect函数的返回值，而后在须要进行监听的中央调用这个匿名函数stop()，就能够敞开了
import { ref, watch, watchEffect } from 'vue';export default { setup() { let name = ref('张三'); let age = ref(18); setTimeout(() => { name.value = '李四'; age.value = 22; }, 2000); setTimeout(() => { stop();//在这里敞开监听后，在4秒后就不会再打印信息了 name.value = '李四2'; age.value = 222; }, 4000); let stop = watchEffect(() => { console.log(name.value); console.log(age.value); }); return { name, age }; },};watchEffect和watch的区别
- watch默认是惰性的，只有当监听的变量产生扭转时才会执行，watchEffect不是惰性的，组件初始化的时候就会执行，扭转时也会执行。
- watch须要指定要监听的变量（ref和reactive类型的变量略不同），watchEffect不须要指定，在回调中应用到的响应式变量都会监听，当这些变量扭转时，回调都会执行。
- watch能够再扭转时获取到新值和旧值，watchEffect只能获取到新值。