1. Vue 2中的set方法?
-------set是Vue 2中的一个全局API。可手动添加响应式数据,解决数据变化视图未更新问题。当在项目中直接设置数组的某一项的值,或者直接设置对象的某个属性值,会发现页面并没有更新。这是因为Object.defineProperty()的限制,监听不到数据变化,可通过this.$set(数组或对象,数组下标或对象的属性名,更新后的值)解决
----如下代码,给 student对象新增 age 属性
原因是: 受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。 要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。
2.Vue2组件通信的方式
1.props:可以实现父子组件、子父组件、V甚至兄弟组件通信
2.自定义事件:可以实现子父组件通信
3.全局事件总线$bus:可以实现任意组件通信
5.VueX:集中式状态管理容器,实现任意组件通信
6.ref:父组件获取子组件实例VC,获取子组件的响应式数据以及方法
7.slot:插槽(默认插槽、具名插槽、作用域插槽)实现父子组件通信
8.pubsub插件:发布订阅模式实现任意组件通信
3. 页面刷新时候vuex状态丢失怎样解决?
-----因为js的数据都是保存到浏览器的堆栈内存中,当刷新页面的时候,堆栈申请的内存被释放,这就是浏览器的运行机制。
------解决刷新后数据丢失的问题,首先可以将数据存储到本地在提交mutation的时候同时存入localStorage,
在store中把值取出来作为state的初始值即可。其次也可以使用第三方插件,推荐使用vuex-persist插件,它是为 Vuex 持久化储存而生的一个插件,不需要你手动存取storage,而是直接将状态保存至 cookie 或者 localStorage中。
4. 了解vue那些性能优化的方法?
-- 1. 路由懒加载。有效拆分应用大小,访问时才异步加载。
-- 2.keep-alive缓存页面。避免重复创建组件实例,且能保留缓存组件状态
-- 3.v-for遍历避免同时使用v-if。实际上在 Vue 3 中已经是一个错误用法了
-- 4.长列表性能优化,可采用虚拟列表。
-- 5. 在使用v-once。不再变化的数据使用v-once。
-- 6.事件销毁。组件销毁后把全局变量和定时器销毁
-- 7.图片懒加载
-- 8.第三方插件按需引入
-- 9.子组件分割。较重的状态组件适合拆分
-- 10. 服务端渲染
5. 关于Vue SSR 的理解?
---SSR即服务端渲染(Server Side Render),就是将 Vue 在客户端把标签渲染成 html 的工作放在服务端完成,
然后再把 html 直接返回给客户端。
---优点:
1. Vue3-组件的七种通信方式
1. props 父传子
2. $emit 子传父
3. 全局事件总线 插件mitt 兄弟之间传递
4. ref/expose
5. pina
6. attrs
7. v-model
8. provide/inject