你真的了解 Vue3 吗? Vue3 有哪些新特性

请你别入坑
219 阅读3分钟

10.jpg

Vue3 VS Vue2

1. 性能更高了
    2. 响应式原理换成了 Proxy
    3. VNode Diff 算法进行了优化
2. 体积更小了
    1. 按需导入,能配合 Webpack 支持 tree shaking
    2. 删除了 EventBus、 filter ....
3. 对 TS 支持好了
4. Composition API
    1. 组合 API : 把同一功能大数据和数据处理逻辑组合到一起
    2. Vue2 对于小型项目一目了然, 很适合上手
    3. COmposition API 对于大型项目更利于维护和服用
5. 新特性
    1. Fragment 不再必须了
    2. Teleport

Vite

1. 下一代的打包构建工具
2. 特点: 快、冷启动

选项API 和 组合API

1. Vue2 是选项API, 当项目打包之后,你会发现同一功能的数据和业务逻辑太过于分散,不利于维护,不方便复用
2. 组合 API 就解决了上面的问题

setup

1. 相当于
    1. beforeCreate
    2. created
2. 执行时机
    1. 比 beforeCreate 还要早,意味着它执行的时候实例根本没有被创建
3. 注意点
    1. 内部的 thit 是 undefined
    2. 模块中想要使用 setup 中的数据或方法,一定要通过 return 返回
4. 返回值不一定是一个对象,也有可能是一个渲染函数

reactive

1. 作用: 可以吧数组或对象包装成响应式的数据
2. 注意点: reactive 内部的对象其实也是一个 reactive 类型的数据
3. isReactive: 判断数据是否是 reactive 类型的

ref

1. 作用: 包装任意类型为响应式数据
2. 注意点
    1. 在 setup 中使用 ref 数据的时候 一定要加 .Value
    2. 模板中不要加,内部会自动加(解包)
3. 推荐: 
    1. 除非明确这个数据是对象或数组, 使用reactive
    2. 其他情况一律使用 ref
    3. 甚至整个项目可以一律使用 ref, 在Vue3.2之后性能更高
4. toRef
    1. 可以吧响应式对象中的某一个属性变为单独的响应式的 ref 对象
    2. 并且转换之后的数据和原来的数据是关键的
5. toRefs: 可以将对象中所有数据变为响应式数据
6. isRef: 判断数据是否是 ref 类型的

computed

1. 如何对 computed 进行赋值

    const fullName = computed({
      get() {
        return 数据
      },
      set(newValue) {
        // newValue 就是输入的新值
        // console.log(newValue)
      },
    })

watch

1. 监听 reactive 内部数据
    1. 默认是深度监听, 并且修改配置无效
    2. 对监听的 reactive 本身赋值不能被监听到
    3. watch(obj, ()=>{}, {配置对象})
2. 监听 ref 数据 
    1. 默认只监听第一层,也就是 .value才是第一层
    2. ref 内部的对象也是一个 reactive 类型
    3. watch(数据, ()=>{}, {配置对象}) // 可以同时监听多个数据 第一个参数是数组
3. 监听普通数据: watch(() => 普通数据, ()=>{}, {配置对象})

生命周期

1. 把created 和 beforeCreated 组合成了 setup
2. 相同的生命周期可以写多次,不会覆盖

setup 参数

1. props
2. context(对象)
    1. emit
    2. attrs
    3. slots

provide/inject

1. 依赖注入: 跨层级数据传递
2. 使用:
    1. 祖先: provide('数据名', 数据)
    2. 子组件: const 变量名 = inject('数据名')

v-model

1. 把 Vue2 中 v-model 和 .sync 结合到一起
2. 相当于 :modelValue 和 @update:modelValue 语法糖
3. 几种等价写法:

image.png

ref属性和 ref函数

1. 获取 dom 对象 


   <template>
     <!-- #3 和 div 的 ref 属性进行绑定 -->
     <div ref="divRef">box</div>
   </template>

   <script>
   import { onMounted, ref } from 'vue'

   export default {
     setup() {
       // #1
       const divRef = ref(null)

       onMounted(() => {
         // #4 divRef.value 就是 DOM
         divRef.value.style.backgroundColor = 'red'
       })

       // #2 导出
       return {
         divRef,
       }
     },
   }
   </script>


2. 获取组件实例
    1. 父传子
    2. 获取子组件的实例的同时调用子组件的方法并传递参数

其他变化

1. v-if 和 v-for 的优先级发生了变化,v-if的优先级更高了
2. 移除了 filters 过滤器
3. 移除了事件中心, Event Bus
4. 全局属性的挂载发生了变化
    1. Vue.mixin --> app.mixin 等
5. data
avatar
文章
阅读
粉丝