注意要代码书写时候,vue3 和vue2 的区别
1,建议不要写this了
>>>Templata
支持多个根标签...<<<
请使用ref()ref或者reactive
1》如何声明变量(普通的data 依然可以。ts中使用Composition API 的api模式)
2》如何修改变量值。不能直接使用this,需要使用""变量.value"
3》如何定义事件,方法
<script lang="ts"> import {defineComponent,ref} from 'vue' export default defineComponent({ setup() { const msg = ref<number>(123); const arr = ref([12,123,777]) const abc = ()=>{ //修改msg的值 msg.value = 888 } return {msg,arr,abc} } }) </script>
如果觉得的单独定义变量,比较繁琐,也可以选用reactive,实现多变量定义
注意:在return中需要加入...toRefs()拓展运算,防止修改对象中的变量不生效(当然,你也可以使用Vue.set实现)
<script lang="ts"> import {defineComponent,ref,reactive, toRefs} from 'vue' export default defineComponent({ setup() { const msg = ref<number>(123); const arr = ref([12,123,777]) const info = reactive({ a:1, b:2, c:3 }) const abc = ()=>{ //修改msg的值 msg.value = 888 info.a = 99 } return {...toRefs(info),msg,arr,abc} } }) </script>
2,生命周期:
备注:在 Vue 3 中,使用 Composition API,生命周期钩子函数已经被废弃。取而代之的是使用 setup()
函数中的特定函数来模拟生命周期的行为。
详情参考官网:生命周期钩子 | Vue.js
beforeCreate===>Not needed* created ===>Not needed* beforeMount ===>onBeforeMount mounted ===>onMounted beforeUpdate===>onBeforeUpdate updated ===>onUpdatedupdated beforeUnmount==>onBeforeUnmount unmounted ==>onUnmounted 备注1:最早只能在 onBeforeMount 获取axios数据,且里面不能操作dom 备注2:全局解绑已经没有了。onBeforeUnmount 和 onUnmounted 备注3:dom操作,除了常规的clas style等,可以通过ref,但是在vue3的 Composition API中,需要定义成变量,么有$refs了 <div ref="myabc"> 我是dom操作 </div> const myabc = ref(null)//定义 onBeforeMount(() => { console.log(msg.value); console.log(myabc.value); }) onMounted(()=>{ console.log(myabc.value);//调用 }) return {myabc} //返回
3、main.js的变化
2.x 全局 API( Vue) | 3.x 实例 API(app) |
---|---|
Vue.config.xxxx | app.config.xxxx |
Vue.component | app.component |
Vue.directive | app.directive |
Vue.mixin | app.mixin |
Vue.use | app.use |
Vue.prototype | app.config.globalProperties |
Vue.config.productionTip | 移除 |
vue2中可以通过Vue.prototype去操作原型,在vue3中只能通过app.config.globalProperties,当时玩的时候还以为自己写错了,修改的这些你会发现改动的东西挺多的变量
举例:定义一个全局的组件
const app = createApp(App) app.component('MyDiv',MyDiv) app.use(store).use(router).mount('#app')
举例:定义全局
main.js中 app.config.globalProperties.$myVals = 'Hello, world!'; 调用方式:this.$myVals 这种方式不适用于setup的Composition API 如果使用setup方法: main.js中 app.provide('$duMy', 'abceffef'); 页面中:setup中 import { inject } from 'vue'; const kk = inject('$duMy'); return {kk}
4.指令与插槽
vue2中使用slot可以直接使用slot,而vue3中必须使用v-slot的形式 v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用 vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突 vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes vue3中移除v-on.native修饰符 vue3中移除过滤器filter 举例:键盘回车事件 setup(){ const handleKeydown = (event:any) => { if (event.code === 'Enter') { // 处理按下回车键的逻辑 console.log('Enter 键被按下'); } }; onMounted(() => { window.addEventListener('keydown', handleKeydown); }); onUnmounted(() => { window.removeEventListener('keydown', handleKeydown); }); }
6,vue3的响应式原理(proxy)
v-model ..proxy
7,vue3中computed
变为组合式Api,那么意味着需要引入,当前如果需要去修改,就需要去终结computed
const number = ref(5); const double = computed(() => { return number.value * 2; }); return {double}
8,router
<template> <div> <!-- 路由链接 --> <router-link to="/about">关于我们</router-link> <!-- 路由视图 --> <router-view></router-view> </div> </template> <script> import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); // 在某个事件或方法中进行路由跳转 const navigateToAbout = () => { router.push('/about'); }; return { navigateToAbout }; } }; </script>
9,hooks模式
提纯代码,可以把逻辑放到单独的文件中,甚至可以复用hooks
<template> <div class="about"> <h1>This is an about page</h1> <button @click="handleClick">{{state.count}}{{state.doubble}}</button> </div> </template> <script> import {useCount} from "../hooks/useCount.js" export default{ setup(){ let {state, handleClick} = useCount(); return { state, handleClick } } } </script> <!--hooks的文件useCount.js--> import { reactive, computed } from "vue" export function useCount() { const state = reactive({ count: 0, doubble: computed(() => state.count * 2) }); function handleClick() { state.count++; } return { state, handleClick } }
10,Teleport传送门组件
可以给弹框定位到想要的位置,比如说body 或者 某个div
<template> <div id="target"> asdfa </div> <div> <button @click="showModal">打开模态框</button> <teleport to="#target"> <div v-if="visible" class="modal"> <h2>模态框标题</h2> <p>模态框内容</p> </div> </teleport> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const visible = ref(false); const showModal = () => { visible.value = true; }; return { visible, showModal, }; } }; </script> <style> #target{ width: 500px; height: 500px; background-color: palegoldenrod; } .modal { position: relative; width: 200px; height: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } </style>
综合汇总:
在script里面加上setup 在vue3.2 中正式支持!
<script setup>
这样就不需要return,和引入一些api了
面试题:vue2 和vue3的大致区别
1.源码组织方式变化:使用 TS 重写 2.支持 compositionAPI,基于函数的 api,更灵活组织组件逻辑(Vue2 使用 options api) 3.响应式系统提升:Vue3 的响应式数据原理改成了 Proxy,可以监听动态新增删除属性,以及数组变化 4.编译优化:Vue 通过标记静态根节点来优化 Diff,Vue 则标记和提升所有静态根节点,Diff 的时候只需要去对比动态节点的内容 5.打包体积优化:移除了一些不常用的 api(inline-template,filter) 6.生命周期的变化,使用 setup 替代了 beforeCreate 和 created 7.template 支持多个根标签 8.Vuex 状态管理,创建实例的方式,Vue2 使用 new store;Vue3 使用 createStore; 9.Route 获取页面实例以及路由信息,Vue2 使用 this 的方式获取;而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取 10.对 props 的使用:Vue2 通过 this 的方式使用;Vue3 则直接通过 props 使用;
1,vue2 和3的区别
2,整理所有的vue3笔记到博客
3,使用vue3 的api模式,开发一套后台管理系统!比如,使用elemenui 。要求有增删改查。登录的页面跳转,