1、vuex刷新页面后数据不能保存?
因为store里的数据是保存在运行内存中,当页面刷新时,页面会重新加载Vue实例,store里面的数据就会被重新赋值初始化。
解决:将state存在localstorage或者sessionstorage中
2、es6新特性
let、const、剪头函数、默认参数、map、set、promise、class、
模板字符串:${vraible}
、
扩展运算符: ...
解构赋值 :let {a,b,c} = {a:1,b:2,c:3}、
3、vu3和vue2哪些不同
场景一:父子组件数据传递
1)在<script setup> props需要defineProps()这个宏函数来进行声明,它的参数和vue2 props的选项值是一样的
2)vue2中子组件传递数据到父组件用emit无法在 <script setup>中使用,这时候需要使用defineEmits()
3)在<script setup>中,组件的属性和默认方法都是私有的,父组件无法访问到子组件中的任何东西,除非子组件通过defineExpose 显示的暴露出去
defineExpose({msg,change})
场景二:组件之间双向绑定
场景三:路由跳转,获取路由参数
vue2中使用this.router进行路由的跳转和参数获取,
在<script setup>中无法使用,
需要使用vue-router提供的useRouter方法跳转路由;
vue-router提供的useRoute方法获取参数;
场景四:获取上下文对象
vue3的setup中无法使用this获取上下文,可以通过getCurrentInstance方法获取上下文对象,这样就可以使用refs等
`
以下两种方法都可以获取到上下文对象
const { ctx } = getCurrentInstance()
const { proxy } = getCurrentInstance()
`
场景五:插槽的使用
vue3中通过v-slot获取模板的位置,同时获取插槽的数据
场景六:缓存路由组件
缓存一般的动态组件vue2和vue3都是使用 KeepAlive 包裹 Component,但缓存路由组件,Vue3需要节后插槽一起使用
场景七:逻辑复用
vue2 用mixins ,但mixin会使数据来源不明,引起命名冲突;
vue3 更推荐全新Compositon Api
场景八:生命周期
1)vue3中的生命周期都以on开头,并且需要在组件中手动导入
2)vue3取消了beforeCreate和created,如果需要在组件创建前注入逻辑,直接在<script setup>中编写同步代码就可以了
3)组件卸载的钩子名称有变化,beforeDestroy 改为 onBeforeUnmount
destroyed改为onUnmonted
场景九:全局API
vue2是在构造函数的原型对象上添加的Vue.prototype.$axios = axios
;
vue3需要在app上添加:app.config.globalProperties.$axios = axios
场景十:与TypeScript结合使用
<script setup lang="ts">
网友评论