vue中的指令按照不同的用途可以分为6大类(1)内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个v-text:会覆盖元素默认内容<pv-text="username"></p>v-html:渲染带标签的内容,并实现标签样式,会覆盖元素默认内容<divv-html="属性"></div>(2)属性绑定指令v-bind:(简写英文:):为元素的属性动态绑定属性值,单向绑定(数据源影响DOM变)支持绑定简单的数据值<imgsrc=""v-bind:placeholder="tips">支持绑定js表达式的运算<div:title="'box-'+index">div盒子</div>字符串需加''(3)事件绑定指令v-on:(简写@):为DOM元素绑定事件监听处理函数写在实例对象的methods属性下<button@click="add()">点击</button>()可传参原生DOM对象onclick,oninput,onkeyup等原生事件,替换为@click,@input,@keyup$eventvue提供的特殊变量,表原生的事件参数对象event,可解决事件参数对象event被覆盖的问题(点击按钮变色问题)事件修饰符方便对事件的触发控制<ahref=""@click.prevent=""></a>按键修饰符监听键盘事件时,判断详细的按键,可为键盘相关的事件添加按键修饰符e.g:<input@keyup.enter="submit">只有按键Enter时,调用submit()(4)双向绑定指令v-model:双向数据绑定指令,不操作DOM的前提下,快速获取表单的数据(5)条件渲染指令按需控制DOM的显示与隐藏v-if:动态创建或移出实现元素显示与隐藏,有更高的切换开销,在运行时条件很少改变,使用较好(e.g:刚进入页面时,某些元素默认不需要被展示,后期也不需展示)v-show:动态为元素添加或移除style="display:none;"样式实现显示与隐藏,有更高的初始渲染开销,需要非常频繁地切换,使用较好v-else必须配合v-if指令一起使用,否则不会被识别v-else-if必须配合v-if指令一起使用,否则不会被识别(6)列表渲染指令v-for:基于一个数组来循环渲染一个列表结构使用iteminlist形式特殊语法(item待循环数组,item被循环的每一项);用索引时(item,index)inlist,item项和index索引都是形参,可重命名使用key维护列表状态官方建议,使用v-for必须绑定属性key,且值通常为id当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能.但这种默认的性能优化策略,会导致有状态的列表无法被正确更新为给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能,需要为每项提供一个唯一的key属性e.g:<trv-for="(item,index)inlist":key="item.id":title="index+item.uname">key的注意事项key的值只能是字符串或数字类型key的值必须具有唯一性（即：key的值不能重复）建议把数据项id属性的值作为key的值（id属性的值具有唯一性）使用index的值当作key的值没有任何意义（index的值不具有唯一性,与每一项无强制关系）建议使用v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）

setup()钩子是在组件中使用组合式API的入口，通常只在以下情况下使用：1.需要在非单文件组件中使用组合式API时。2.需要在基于选项式API的组件中集成基于组合式API的代码时。其他情况下，都应优先使用<scriptsetup>语法。（1）ref创建值类型响应式数据方法在seup内部需要.value来访问设置值（2）reactive创建引用类型响应式数据方法（3）defineProps定义组传的传参props（4）defineEmits定义组件发送的事件（5）watch监听一个数据的变化（6）watchEffect监听多个数据（7）生命周期setup中的生命周期，没有beforeCreate与createdsetup的生命周期需要加on前缀

vue2vsvue3双向绑定更新vue2的双向数据绑定是利⽤ES5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了ES6的ProxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是相⽐于vue2版本，使⽤proxy的优势如下1.defineProperty只能监听某个属性，不能对全对象监听可以省去forin、闭包等内容来提升效率（直接绑定整个对象即可）2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。实例化Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗，也⽆疑增加了⽤户加载时间。而vue3.0中可以⽤ESmoduleimports按需引⼊，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。生命周期引用掘金图片如下：获取propsvue2在script代码块可以直接获取props，vue3通过setup指令传递vue2：console.log(‘props’,this.xxx)vue3：setup(props,context){console.log(‘props’,props)}数据和方法的定义Vue2使⽤的是选项类型API（OptionsAPI），Vue3使⽤的是合成型API（CompositionAPI）Vue2：data(){return{};},methods:{}Vue3：数据和⽅法都定义在setup中，并统⼀进⾏return{}给父组件传值emitvue2：this.$emit()vue3：setup(props,context){context.emit()}watchEffectVue3中除了watch，还引入了副作用监听函数watchEffect，用过之后我发现它和React中的useEffect很像，只不过watchEffect不需要传入依赖项。那么什么是watchEffect呢？watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect相当于将watch的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于watch的是watchEffect的回调函数会被立即执行，即（{immediate:true}）。组件通信注意props中数据流是单项的，即子组件不可改变父组件传来的值在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。attrs和listeners子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性(class和style)之外的所有属性。子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器路由vue3和vue2路由常用功能只是写法上有些区别：vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的；大家都知道setup中组件实例已经创建，是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的，此时组件还未创建，所以是无法用在setup中的；如果想在setup语法糖中使用则需要再写一个script如下：<script>exportdefault{beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},};</script>vue3路由写法：<script>import{defineComponent}from'vue'import{useRoute,useRouter}from'vue-router'exportdefaultdefineComponent({beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),setup(){constrouter=useRouter()constroute=useRoute()consttoPage=()=>{router.push(xxx)}//获取params注意是routeroute.params//获取queryroute.queryreturn{toPage}},});</script>vue2写法：<script>exportdefault{beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteEnter(to,from,next){//在渲染该组件的对应路由被confirm前调用next()},beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),beforeRouteLeave((to,from,next)=>{//离开当前的组件，触发next()}),methods:{toPage(){//路由跳转this.$router.push(xxx)}},created(){//获取paramsthis.$route.params//获取querythis.$route.query}}</script>