1.vuex是什么?怎么使用?哪种功能场景使用它?
- vuex 就是一个仓库,仓库里放了很多对象。
- 其中 state 存放的是数据状态,不可以直接修改里面的数据。
- getters类似vue的计算属性,主要用来过滤一些数据。
- mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。
- actions:保存的触发mutations中方法的方法,可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。
一般什么样的数据会放在 State 中呢?
目前主要有两种数据会使用 vuex 进行管理: 1、组件之间全局共享的数据 2、通过后端异步请求的数据 比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态
- 怎么使用Vuex? 在main.js引入store,注入。新建了一个目录store,… export
- 场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车
2.开发时,改变数组或者对象的数据,但是页面没有更新如何解决?
- 对于数组:
Vue 不能检测以下数组的变动:
1.当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength//举个例子: var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的 //为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新: // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) // 你也可以使用 [`vm.$set`](https://cn.vuejs.org/v2/api/#vm-set) 实例方法,该方法是全局方法 `Vue.set` 的一个别名: vm.$set(vm.items, indexOfItem, newValue) // 为了解决第二类问题,你可以使用 `splice`: vm.items.splice(newLength)
var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) //你可以添加一个新的 age 属性到嵌套的 userProfile 对象: Vue.set(vm.userProfile, 'age', 27) //你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名: vm.$set(vm.userProfile, 'age', 27) //有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。 vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
- 强制刷新
this.$forceUpdate()
原文参考:https://blog.csdn.net/sunzbking/article/details/86150365
3.vue弹窗后如何禁止滚动条滚动?
参考原文:
vue弹窗屏蔽滑动的两种解决方案
vue弹窗后如何禁止滚动条滚动?
vue如何禁止弹窗后面的滚动条滚动?
10.如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
参考原文:
如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
4.
nextTick
nextTick
可以让我们在下次 DOM 更新循环结束之后执行延迟回调,用于获得更新后的 DOM- nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用
Promise
MutationObserver
setImmediate
如果以上都不行则采用setTimeout- 定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列
5.
computed
和watch
区别
computed
是计算属性,具有缓存性。
当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性computed
。
用于依赖发生变化时,触发属性重新计算。Computed
本质是一个具备缓存的watcher
,依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。watch
更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props
,$emit
或者本组件的值,当数据变化时来执行回调进行后续操作。
无缓存性,页面重新渲染时值不变化也会执行。Watch
没有缓存性,更多的是观察的作用,可以监听某些数据执行回调。当我们需要深度监听对象中的属性时,可以打开deep:true
选项,这样便会对对象中的每一项进行监听。这样会带来性能问题,优化的话可以使用字符串形式监听,如果没有写到组件中,不要忘记使用unWatch
手动注销。- 应用场景:
当我们要进行数值计算,而且依赖于其他数据,那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化。
6.对于MVVM的理解
- MVVM 是 Model-View-ViewModel 的缩写
- Model:表数据模型,因为它仅仅关注数据本身,不关心任何行为
- View:用户操作界面,当ViewModel对Model进行更新的时候,会通过数据绑定更新到View
- ViewModel :业务逻辑层,也是View和Model层的桥梁
- 总结:总结: MVVM模式简化了界面与业务的依赖,解决了数据频繁更新。MVVM 在使用当中,利用双向绑定技术,使得 Model 变化时,ViewModel 会自动更新,而 ViewModel 变化时,View 也会自动变化。
7.Vue是如何实现双向绑定的?
Observer
遍历数据对象,给所有属性加上setter
和getter
,监听数据的变化compile
解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图Watcher
订阅者是Observer
和Compile
之间通信的桥梁,主要做的事情:
在自身实例化时往属性订阅器(dep)
里面添加自己
待属性变动dep.notice()
通知时,调用自身的update()
方法,并触发Compile
中绑定的回调Vue2.x 响应式原理
vue
实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给Vue
实例来作为它的data
选项时,Vue
将遍历它的属性,用Object.defineProperty()
将它们转为getter/setter
。用户看不到getter/setter
,但是在内部它们让Vue
追踪依赖,在属性被访问和修改时通知变化。vue
的数据双向绑定 将MVVM
作为数据绑定的入口,整合Observer,Compile
和Watcher
三者,通过Observer
来监听自己的model
的数据变化,通过Compile
来解析编译模板指令(vue
中是用来解析{{}}
),最终利用watcher
搭起observer
和Compile
之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input
)—>数据model
变更双向绑定效果。