细说vue2和vue3区别

1.vue的引入方式

vue2

import Vue from 'vue' .......完整写法：import Vue from "../node_modules/vue/dist/vue.js";

vue3

import { createApp } from 'vue'

vue通过createApp函数创建实例，vuejs会引入一个json的对象，createApp是这个对象的一个方法。

2.组件生命周期变化

 

 

 

 

 3.组合式API

  setup组件选项--组合式API在setup中使用

新的 setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

setup函数的参数：

1. props

2. context

props

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

 

因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性。

如需解构prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

 如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：

import { toRef } from 'vue'
setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}

context

context 是一个普通的 JavaScript 对象，非响应式（可解构）---{attrs,slots,emit,expose}

//Attribute：非响应式对象,等同于$attrs

//插槽：非响应式对象,等同于$slots

//触发事件：方法,等同于$emit

//暴露公共property函数

attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。避免进行解构，attrs 和 slots 的 property 是非响应式的。

渲染函数

setup还可以返回一个渲染函数，返回一个渲染函数将阻止我们返回任何其它的东西，当我们想通过模板 ref 暴漏函数给其父组件使用的时候，可以使用expose来处理这个问题。

import { h, ref } from 'vue'
export default {
  setup(props, { expose }) {
    const count = ref(0)
    const increment = () => ++count.value

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}