Vue2.x 和vue3.x的语法区别
vue2.x使用*import Vue from 'vue'*，然后使用new Vue()创建实例。vue3.x则是*import {createApp} from 'vue'*，通过createApp()来创建实例了。
image.png
Router.js创建路由
Vue3.x需要引入createRouter创建地址路由。
createWebHashHistory对应之前的hash，createWebHistory对应之前的history。
image.png
Vuex状态管理
堆栈内容
深拷贝和浅拷贝
深拷贝的方法：
一、 逐个去拿到简单数据项（网上可以搜到递归解决，思路类似)
let obj = {name:'fiona-SUN'}; letcopyFunc = (originObj) =>{ letcopyObj = {}; for(letkey in originObj){ copyObj[key] = originObj[key]; } returncopyObj; }; letcopyObj = copyFunc(obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'
· 二、方法二：通过JSON去解析
et obj = {name:'fiona-SUN'}; letcopyObj = JSON.parse(JSON.stringify(obj)); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'
· 方法三：es6之展开Object.assign（拷贝obj的内容到一个新的堆内存，copyObj存储新内存的引用）
let obj = {name:'fiona-SUN'}; letcopyObj = Object.assign({}, obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'```
· 方法四：es6之展开运算符（仅用于数组）
let arr = [1,2,3]; let copyArr = [...obj]; copyArr[2] = 0; console.log(copyArr[2]); // 0 console.log(arr[2]); // 2```
计算属性设置值
想要改变计算属性的值，要通过set方法去触发它所依赖的变量，（类似于触发它重新计算，单纯赋予一个新值，在取的时候也是不会被改变的）
v-for优先于v-if
事件名推荐使用kebab-case 因为事件绑定，会统一把大写变成小写
Prop值的改变，不是立即
如果父组件，传递prop，
可以监听值改变取调用子组件的方法
将子组件相关方法的调用放在nextTick里面
this.$forceUpdate****强制刷新
如何优化spa应用的首屏加载缓慢的问题
在配置路由的时候，页面和组件使用懒加载的方式引入，进一步缩小应用程序包的app.bundel体积，在调用某个组件的时候再去调用对应的js文件
加一个loading图，提升用户体验。
