vue3的重大变化

入口文件main.js

main.js：

//vue3
import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
const app = createApp(App);
app.mount('#app')

app.use('插件')

//vue2
const app = new Vue(options);
Vue.use(插件);
app.$mount('#app');

解析:

1. vue3不提供构造函数vue,是通过具名导入一个createApp，然后将根组件app传入进去，得到一个实例app，app.mount()挂载到相应的部分。
2. 使用插件的区别，vue3直接通过createApp得到的实例app，然后app.use使用插件。vue2是通过Vue构造函数去使用插件，Vue.use(插件)。

组件中的this的指向

• vue2中this指向组件实例。
• vue3中this指向一个代理（proxy），代理指向组件实例。

composition api

• template中可以有多个根节点
• vue2中是option API （配置），vue3新出composition api
• vue3也支持原来vue2 option api 的编写。
  • 配置api导致的问题：一个功能可能分配到不同的配置中，导致维护困难。适合功能少。
  • composition api就可以解决这个问题，一个功能一段代码块。适合功能多。

setup函数

例子解析：

<template>
  <h1>count:{
    
    {
    
    count}}</h1>
  <p>
    <button @click="increase">increase</button>
    <button @click="decrease">decrease</button>
  </p>
</template>

<script>
import {
    
     ref } from "vue";
function useCount() {
    
    
  // 使用ref将变量变成响应式的
  let count = ref(0);
  const increase = () => {
    
    
    count.value++;
  };
  const decrease = () => {
    
    
    count.value--;
  };
  return {
    
    
    count,
    increase,
    decrease
  };
}
export default {
    
    
  setup() {
    
    
    console.log("所有生命周期函数之前调用");
    // this -> undefined
    // 在setup中 ref定义的要 使用.value访问，而组件中直接使用，组件中通过代理访问，本质还是.value
    // 返回的对象会挂载到组件实例上
    return {
    
    
      ...useCount()
    };
  }
};
</script>