vue3 新特性总结

Vue2 到 Vue3 最直观的改变就是 Composition API——几乎所有的 Vue2 options 方法都被放到了 setup 函数里。
就是从基于对象的编程（OOP）转向了函数式编程（FP）。

创建方式

首先创建方式发生了改变

import { createApp } from "vue"; 
 createApp(App)

Teleport

可以改变它包含的html渲染的节点位置，例如：下边的div将会渲染到body下边

<teleport to="body">
	<div>1111111</div>
</teleport>

reactive

返回对象的响应式副本。
创建响应式对象，针对的主要是引用类型数据

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

如果对reactive采用了解构，那它将失去响应式，可以用torefs

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 逻辑运行状态

  // 返回时转换为ref
  return toRefs(state)
}
export default {
  setup() {
    // 可以在不失去响应性的情况下破坏结构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

ref

接受一个内部值并返回一个响应式且可变的 ref 对象
创建响应式对象，主要针对的是基本类型的数据
ref对象需要通过它的.value属性来访问

const count = ref(0)
console.log(count.value) // 0

setup函数

组合式 API,在创建组件之前执行
参数 props, context 上下文，是一个普通的 JavaScript 对象，它暴露三个组件的 property

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

组合是api生命周期对应表，需要引入
例如： import { onMounted } from ‘vue’
onMounted(()=>{})执行

beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

在 setup() 内部，this 不会是该活跃实例的引用，需注意

watchEffect与watch

watchEffect在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

filter

官方取消了过滤器，推荐使用调用函数的方式处理

响应式原理机制发生了改变

Vue2.0响应式原理机制 - defineProperty
Vue3.0数据响应机制 - Proxy