Vue核心概念与技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/wz__QWERTY/article/details/123821398

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.youkuaiyun.com/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变更双向绑定效果。

vue知识总结(一)