vue3复习

前端段

已于 2023-04-20 16:55:10 修改

阅读量979

点赞数

分类专栏： vue学习文章标签： vue.js javascript 前端

于 2021-04-17 15:51:32 首次发布

本文链接：https://blog.csdn.net/hkduan/article/details/115792657

版权

vue学习专栏收录该内容

56 篇文章 2 订阅

订阅专栏

vue2升级vue3的方法：
参考链接
1.模拟vue3语法，但是引擎还是vue2的
2.vue add vue-next 完全vue3引擎
在这里插入图片描述

vue3用vite替代webpack打包

$ npm init vite-app
或者用 vue create
vite优点，hmr热更新快在这里插入图片描述

$ cd
$ npm install
$ npm run dev

用createApp方法，链式调用use()，最后挂载到dom上：mount(#id)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './index.css'

// 屏蔽错误信息
app.config.errorHandler = () => null;
// 屏蔽警告信息
app.config.warnHandler = () => null;
createApp(App).use(store).use(router).mount('#app')
// mount相当于 document.getElementById('app').appendChild(component.$el)

vue3  mixins和hooks

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- <script src="./vue.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <div @click="addmsg">点击加2{{fooObj.foo}}</div>
    <child>
        <!-- 作用域插槽必须是template开头且结尾 -->
        <template slot-scope="props">
           <li v-html="props.value ===2? '<strong style=\'color:red;\'>2</strong>':props.value" ></li>
        </template>
    </child>
</div>
<script type="text/javascript">
    Vue.createApp({
        data(){
            return {
                    hi:'hellow world'
                }
            },
        render() {
            return Vue.h('div', {}, this.hi)
        }
    }).mount("#root");

    // const RootComponent = { 
    //     data(){
    //         return {
    //             hi:'hellow world'
    //         }
    //     },
    //     render() {
    //         return Vue.h('div', {}, this.hi)
    //     } 
    // }
    // const app = Vue.createApp(RootComponent)
    // const vm = app.mount('#root')
</script>
</body>
</html>

在这里插入图片描述
生命周期

beforeCreate -> use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

新增加的钩子
我们还可以在Vue3中使用两个全新的钩子来进行调试。他们是：

onRenderTracked

onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

exportdefault {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}

基本使用：

<script setup lang="ts">
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  computed,
  watch,
  watchEffect,
} from "vue";

const mynum = ref(0);
const myobj = reactive({
  name: "duan",
  age: 41,
});
onBeforeMount(() => {
  console.log("beforemounted");
});
onMounted(() => {
  console.log("mounted");
});
const btn_mynum = () => {
  mynum.value -= 1;
};
const btn_myobj = () => {
  myobj.age += 1;
};
const mynum2 = computed(() => {
  return mynum.value * 2;
});

const stopWatch = watch(
  // 调用stopWatch可以停止watch侦听
  () => myobj, // 可以放对象myobj，默认开启深度监听。或者对象.子内容，用箭头函数
  (newV, oldV) => {
    console.log(newV, oldV);
  },
  { deep: true } // 默认开启deep:true
  // {immediate:true} //才自动执行一次
);
const stopWatchEffect = watchEffect(
  (oninvalidata) => {
    console.log("myobj.age:", myobj.age); //会自动执行一次
    oninvalidata(() => {
      // 不会先执行
      // 点击stopWatch后，这里不会执行了
      console.log("before");
    });
  },
  {
    flush: "post", // dom加载完毕后执行 beforemounted
    // onTrigger(e) {
    //   debugger; // 用于debugger 调试
    // },
  }
);
const stop = () => stopWatchEffect();
</script>

对tsx支持代替jsx或者.vue文件

import * as vue from 'vue';
const React = { createElement: vue.h, Fragment: vue.Fragment }

export const Hello = vue.defineComponent({
    props: {
        message: String
    },
    setup(props) {
      return () => <div>{ props.message }</div>
    }
})

https://blog.csdn.net/weixin_42623773/article/details/123430695

Volar 插件：
使用vue3.0版本开发强烈建议你将 VS Code (opens new window)安装Vue Language Features (Volar)这款插件，并禁用Vetur插件。

vue3使用refs
没有this，取而代之的是proxy

<template>
<el-button ref="btnSave" />
</template>

import {getCurrentInstance, ref} from 'vue';
const {proxy} = getCurrentInstance() as any;


//需要调用的地方，执行下面这句：
proxy.$refs.btnSave.$el.click()

方法二：

import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup () {
    const store = useStore()
	const route = useRoute()
    const router = useRouter()
    return {
      // 访问 state  函数
      count: computed(() => store.state.count),
      // 访问 getter函数
      double: computed(() => store.getters.double)
	  // mutation
      increment: () => store.commit('increment'),
      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}