vue3常用的实用API

vue3.x发布了这么久，相关的生态也逐渐回暖，包括vite这个新的打包工具。vue3.0的学习过程中有一些比较实用的api。希望能在开发的时候给大家演示一下，准确的使用相应的API来完成我们项目开发生命周期的改变。特别是setup函数替换了beforeCreate和created这两个生命周期函数，所以我们可以认为它的执行时间是在beforeCreate和created之间Vue2Vue3beforeCreatesetupcreatedsetupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeDestoryonBeforeUnmountdestoryedonUnmounted了解过Vue3的朋友都知道现在会用到setupreactive函数，而我们将使用setup函数创建一个操作数据的好方法。一个响应式的数据对象，这个API也解决了Vue2通过defineProperty实现数据响应式的缺陷。使用方法很简单，将数据作为参数传入即可。ref在引入setup函数的时候，我们使用ref函数包装了一个响应式数据对就像，从表面上看，它和reactive的功能好像一模一样，而且差不多，因为ref是通过reactive包装了一个对象，然后把value传递给对象中的value属性，这就解释了为什么每次您访问我们都需要添加.value。我们可以简单的把ref(obj)理解为这个reactive({value:obj})注意：这里指的是.在setup函数中访问ref-wrapped对象时需要加上value，在template模板中访问时不需要，因为在编译的时候会自动识别是否ref-wrapped，那我们怎么选呢关于ref和reactive？建议：基本类型值（String、Nmuber、Boolean等）或单值对象（如{count:3}，只有一个属性值的对象）使用ref引用类型值（Object、Array）和使用reactive我们在vue2.x中ref是用来获取vue3.x中的元素标签的，如果要获取元素标签怎么办呢？获取元素的操作分为以下几步：首先给出元素的reftargetelement给属性设置一个值，假设是el，然后调用setup函数中的ref函数，值为null，赋值给变量el，这里要注意变量名必须相同作为我们为元素设置的ref属性名对元素的引用变量el返回(return)补充：设置的元素引用变量只有在组件挂载后才能访问，所以在挂载前对元素进行操作是无效的.当然，如果我们引用一个组件元素，那么获取到的就是这个组件的实例对象。toReftoRef是将对象中的某个值转换为响应式数据。它接收两个参数。第一个参数是obj对象；第二个参数是对象中的属性名有一个ref，另一个上面的toRef，是不是冲突了？两者效果不同：ref是原始数据的副本，不会影响原始值，同时响应式数据对象的值发生变化后视图将同步更新。toRef是对原始数据的引用，会影响原始值，但是响应式数据对象的值发生变化后，视图是否会更新？toRefs将传入对象中所有属性的值转换为响应式数据对象，该函数支持一个参数，即obj对象返回一个Object，其中包含每个封装好的响应式数据对象shallowReactive听了这个API的名字就知道这是一个浅层的响应式。是不是说原来反应很深？是的，这是一个性能优化的APIimport{shallowReactive}from'vue'exportdefault{setup(){constobj={a:1,first:{b:2,second:{c:3}}conststate=shallowReactive(obj)functionchange1(){state.a=7}functionchange2(){state.first.b=8state.first.second.c=9console.log(state);}return{state}}}首先我们点击第二个按钮改变了第二层的b和第三层的c，虽然值变了，但是视图并没有更新；当我们点击第一个按钮并更改第一层的a时，整个视图都会更新；可以解释为shallowReactive监听第一层值的属性，一旦改变，更新视图shallowRef这是一个shallowref，和shallowReactive一样用于性能优化。有了triggerRef，调用它可以立即更新视图。它接收一个参数state，就是需要更新的ref对象shallowReactive是监听第一层对象的数据变化来驱动view更新，那么shallowRef就是监听.value的值的变化更新视图toRawtoRaw方法用于获取ref或上面的代码证明了toRaw方法是从reactive对象中获取原始数据的，所以我们可以很方便的通过修改原始数据的值而不更新视图做一些性能优化注意：还有一点，当toRaw方法接收到的参数是ref对象时，需要加上.value来获取原始数据对象。markRawmarkRaw方法可以将原始数据标记为Non-responsive，即使用ref或者reactive包裹，仍然无法实现数据响应，它接收一个参数，即原始数据，返回标记后的数据即使我们修改了值，视图也不会更新，即没有数据响应watchEffectwatchEffect与watch的区别主要有以下几点：不需要每次初始化都手动传入依赖，会执行回调函数自动获取依赖。无法获取原始值，只能获取更改后的值()=>{console.log(state.count)console.log(state.name)/*初始化时打印：0zs1秒后打印：1ls*/})setTimeout(()=>{state.count++state.name='ls'},1000)}}没什么watch方法先给它传入一个依赖，而是直接指定一个回调函数。组件初始化时，执行一次回调函数，自动获取需要检测的数据。State.count和state.name根据以上特征，我们可以选择使用哪个监听器来获取getCurrentInstance。我们都知道，在Vue2的任何一个组件中，如果我们想获取当前组件的实例，都可以通过this来获取。在Vue3中，我们很多代码都运行在setup函数中，而在这个函数中，this指向undefined，那么如何获取当前组件的实例呢？这时候可以使用另一种方法，就是getCurrentInstance注释中的反馈：生产环境没用，获取不到ctx上下文。Instance关注ctx和proxy属性，这两个就是我们要的this可以看出ctx和proxy的内容非常相似，只是后者相对前者包裹了一层proxy，可见proxy是一个响应式的useStore。在Vue2中使用Vuex时，我们是通过this.$store来获取Vuex实例的，但是前面说了Vue2中获取this的方法不一样，我们在getCurrentInstance()中并没有找到$store这个属性Vue3的.ctx，那么如何获取Vuex实例呢？这是通过vuex中的一个方法，也就是useStore//store文件夹下的index.jsimportvuexfrom'vuex'conststore=Vuex.createStore({state:{name:'front-endimpression',age:22},mutations:{...},...})//example.vue然后就可以像以前一样使用vuex了。参考：vue3常用api用法