持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情juejin.cn/post/714765…
今天有学习到了一些vue3和vue2的区别，做了笔记整理。
computed计算属性
该属性默认是只读的，当我们尝试修改一个计算属性时，会收到一个运行时警告。只在某些特殊场景中我们可能才需要用到“可写”的属性，就可以通过同时提供 getter 和 setter 来创建：
注意：
- Date.now（）在计算属性中监听不到，因为Date不是响应式数据，computed中的响应数据大多是data中的数据或者从父组件传过来的数据。
- get方法中不能有副作用操作。例如更改DOM或异步请求。
- 避免直接修改计算属性值。也就是能不更改计算属性的响应依赖就不更改。
组件添加类名：利用透传attribute
在组件上使用class属性，会透传到该组件的模板上，并且只能头传到组件的跟元素，如果想透传给其他html标记，给该标记添加动态:class=“$attr.类名”
条件渲染（和原来没区别）
<template>是作为一个整体存在，除了模板上的<template>，在其他地方书写了<template>，并不会渲染出来，它相当于区分一个代码块。在Vue2中也是一样的用法，所以可以用它结合v-if指令。主要是为了减少嵌套。因为用<div>代替<template>它也可以实现。
注意：v-show指令不能用在<template>上
v-if和v-for
- v-if优先级更高，如果条件不成立，就不会进行列表渲染。
- v-for可以进行解构赋值
- v-for里的in可以使用of代替，运行时没有任何区别
- v-if里不访问v-for里的item的属性，因为v-if的优先级更高，v-if会先执行Vue2里可以这么访问。如果v-if里不用v-for里面的值，可以照常判断。
- 解决办法：在需要循环的元素外层嵌套
<template>，把v-for放到该元素身上。 - 注意：可以把key添加在
<template>上，或者添加在重复的元素标记身上。
- 在组件上使用v-for，然后该怎么传值就怎么传值
- 数组排序可以放在计算属性里，把排完序的结果return出来。
- v-if中不再需要添加key值了，Vue3中会自动添加不同的key。而vue2中是需要加key的，否则会就地复用。
v-bind与普通属性优先级
如果v-bind="{id:blue}"和id="red"
- vue2中v-bind值为对象的话，单独写的属性优先级更高。id="red"生效
- vue3中谁写在前面谁优先级更高。
事件处理
- 和以前没有区别。照常可以写表达式（内联事件处理器），也可以写事件函数名（方法事件处理器）
e.tarhet.tagName访问到触发时间的DOM元素
注意：如果不需要传参，那么事件函数里接收的直接是event，如果进行了传参，那么第二个参数要传一个$event，才能在事件函数第二个形参里接收到
事件修饰符
.nativ修饰符在Vue3中被删除了,用emits代替了它。
该修饰符的作用可以监听组件根元素的原生事件，例如：当原生事件一触发，其实就会触发onFoucs事件
<BaseInput v-on:focus.native="onFocus"></BaseInput>
