Vue 3.0 学习 [ 持续更新 ]

 

 简介：

　　基于 2.x 对象的 API 在 Vue 3 中基本完好无损。但是，3.0 还引入了组合 API - 一组新的 API，旨在解决大规模应用程序中 Vue 使用的痛苦点。组合 API 基于反应性 API 构建，并且能够实现类似于 React 挂钩的逻辑组合和重用，与基于 2.x 对象的 API 更灵活的代码组织模式以及更可靠的类型推理。

合成 API 也可以通过@vue/合成 api 插件与 Vue 2.x 一起使用，并且已经有组合 API 实用程序库同时可用于 Vue 2 和 3（例如vueuse，vue-可组合）。

 

vue3.0 是如何变化的呢？

一.diff算法的优化

1.1 vue2.0 的 vdom 是进行全量的对比操作。

1.2 vue3.0 在原来的基础上添加了 vdom 的静态标记。

与上一次的 vdom 进行 diff 算法对比时，只对比带有静态标记的 vdom 节点（patch, flag），

并且可以通过 flag 的信息 获得当前节点需要对比的具体内容

二.静态提升

2.1 vue2.0 无论元素是否更新，每次都会重新创建

2.2 vue3.0 对于不需要更新的节点元素，只会创建一次， 之后每次进行渲染进行复用。

三.事件监听器

3.1 默认onclick 绑定的事件 会被视为动态绑定，每次渲染都会监听改变，因为是同一函数不会监听变化，会缓存该方法进行复用。

四. 组合 Api

 4.1. 使用方法

 

<template>
  数字：{{num}}-----{{newnum}}
  <br />
  <button @click="addnum">添加</button>
  <br>
  <ul>
    <li v-for="item in todolist" :key="item.id">
      {{item.name}}----{{item.age}}
    </li>
  </ul>
  {{newnum}}
</template>

<script>

// 引用 ref 或者 reactive 在 vue 中
import { ref, reactive } from 'vue'

export default {
  name: 'App',
  /**
   * 使用 setup 函数 【可以叫 组合Api 或 注入Api】
   * 注意事项：
   *  1.使用 ref 在 template 中不需要.value取值， 在 setup 中的方法 必须取.vaule才可以取到值
   *  2.使用 reactive 必须是使用数组或者对象，否则页面不进行更新渲染操作 【reactive 不需要.value取值】
   */
  
  setup() {
    // 数字
    let num = ref(0)
    // 测试 watch
    let newnum = ref(0)
    // 添加数字方法
    function addnum() {
      num.value +=  1
    }
    // 数组
    let todolist = reactive([
      {
        id: "1",
        name: '小明',
        age: '10'
      },
      {
        id: "2",
        name: '小红',
        age: '20'
      }
    ])
    // watch 是一个方法里面传一个箭头函数，最后 return 出去
    let numstate = watch(
      () => {
        newnum.value = num.value * 2
      }
    )
    // 最后 return 出去
    return { num, addnum, todolist, numstate, newnum }
  }
}
</script>

4.2. 整理用例 【js引用方式】

1 vue文件

<template>
  <br />
  {{num}}------{{newnum}}
  <br />
  <button @click="addnum">添加</button>
  <br>
  <ul>
    <li v-for="item in todolist" :key="item.id">
      {{item.name}}----{{item.age}}
    </li>
  </ul>
</template>

<script>
// 引用方法
import { app } from './App/index'

export default {
  name: 'App',
  setup() {
    let { num, addnum, todolist, numstate, newnum } = app()
    return { num, addnum, todolist, numstate, newnum}
  }
}
</script>

2 js文件

import { ref, reactive } from 'vue'

export function app() {
  // 数字
  let num = ref(0)
  // 测试 watch
  let newnum = ref(0)
  // 添加 num 方法
  function addnum() {
    num.value +=  1
  }
  // taodolist 数组
  let todolist = reactive([
      {
        id: "1",
        name: '小明',
        age: '10'
      },
      {
        id: "2",
        name: '小红',
        age: '2'
      }
    ])
  // watch 是一个方法里面是个箭头函数最后 return 出去
  let numstate = watch(
      () => {
        newnum.value = num.value * 2
      }
    )
  return {num, addnum, todolist, numstate, newnum}
}

　　

 setup注意事项：

1. setup函数执行的时候，vue还没有执行到 Created 生命周期方法，所以在 setup 函数中是无法使用 data 和 methods，

由于 无法使用 Vue 为了避免错误使用 直接把 this 指向修改成 undefined。

1.1 可以在setup函数中 使用 onMethods 可以实现 methods 生命周期效果。

2. setup 是同步的，无法使用异步。

3.但是setup里面this指向undefined，可以通过getCurrentInstance()这个接口获取组件实例! 【请以至5.2】

4. 因为无法使用 this 【this.$emit()】失效 可以用 setup 中 ctx 参数 或者 getCurrentInstance().emit('xxxx')

5. Vue3新增方法

5.1 watchEffect

const num= ref(0)
// 当 num 更改时会执行该方法 【响应式跟踪函数中引用的响应式数据，当响应式数据改变时，会重新执行该函数】
watchEffect(() => console.log(num.value))

5.2 getCurrentInstance

Vue3中我们大量的代码都在 setup 函数中运行，并且在该函数中 this 指向的是 undefined，那么该如何获取到当前组件的实例呢？

import { getCurrentInstance} from 'vue'

setup() {	
  const instance = getCurrentInstance()
  console.log(instance)

  return {num}
}