vue3实践总结

一.环境配置

1.cdn引入

    <div id="app">
        <input type="text" v-model="demo">
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    demo: "wwww"
                }
            }
        })
        const vm = app.mount('#app')
    </script>

2.npm全局安装

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next
# 从vue2升级
vue upgrade --next
#创建项目
vue create my-vue3-demo
#运行
npm run serve

3.vite(真香警告)

# Vite 需要 Node.js 版本 >= 12.0.0。
npm init @vitejs/app
#OR
yarn create @vitejs/app

二.生命周期

beforeCreate ---->setup
created ---->setup
beforeMount ---->onBeforeMount
mounted ---->onMounted
beforeUpdate ---->onBeforeUpdate
updated ---->onUpdated
beforeDestory ---->onBeforeUnmount
destoryed ---->onUnmounted

由于vue3做了更好的性能优化所有的钩子都是按需加载的方式,需要在用到时单独引用

import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, 
  onBeforeUnmount, unMounted} from 'vue'
    name: 'App',
  setup() {
    onBeforeMount(() => {
      // 在挂载前执行
    })
    onMounted(() => {
      // 在挂载后执行
    })
    onBeforeUpdate(() => {
      // 在更新前前执行
    })
    onUpdated(() => {
      // 在更新后执行
    })
    onBeforeUnmount(() => {
      // 在组件销毁前执行
    })
    unMounted(() => {
      // 在组件销毁后执行
    })
    return {}
  }

三.路由的变化

主要区别在于必须导入新方法：createRouter 和 createWebHistory。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import test from '../views/test.vue'
const router = createRouter({
  history: createWebHistory,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/test',
      component: test
    }
  ]
})
export default router;

在main.js中使用router

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

在vue组件中使用route方法

import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  const router = useRouter()

四.setup

特征：
1.处于生命周期函数beforeCreate和Created之间的函数也就说在setup函数中是无法使用data和methods中的数据和方法的
2.setup函数是CompositionAPI(组合API)的入口
3.setup函数提供了两个参数props和context,context这个对象包含attrs，slots，emit三个属性

五.新特性：ref()、reactive()、toRef()、toRefs()

ref：主要用于基本类型的响应。ref如果要修改他的值只能使用.value进行修改。
reactive：主要用于引用类型的响应。
当ref中的值是引用类型时，会自动转成reactive类型
toRef：创建一个ref类型数据, 并和以前的数据关联
toRefs：批量创建ref类型数据, 并和以前数据关联

3.toRef和ref区别

  ref-创建出来的数据和以前无关(复制)
  toRef-创建出来的数据和以前的有关(引用)
  ref-数据变化会自动更新界面
  toRef-数据变化不会自动更新界面

so 如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef

六. getCurrentInstance

允许访问对高级用法或库创建者有用的内部组件实例。

const {ctx,proxy} = getCurrentInstance();
ctx.$axios.post ...
# 在生产环境中使用proxy
proxy.$axios.post ...

七. vuex

import {useStore} from 'vuex';
console.log(store.state.user.name);
store.commit('SET_TOKEN',token)

八. 父子组件传值provide()和inject()

# 父组件
 setup() {
    let text = ref('');
    provide("text", text); 
  }
# 子组件
 setup() {
  const name = inject("name");
    return {
      name
    };
    }