vue知识点总结1

知识点整理

1. Vue和React的区别

何为数据双向绑定：View层和Model层的数据相互影响。

相同点：

1. React与Vue都是能快速构建前端项目的前端框架；
2. React与Vue都推荐使用组件化---模块化，只有骨架，可以引用第三方组件扩展功能，方便团队的开发维护（路由、状态管理等是通过引入第三方组件实现的）
3. 都采用Virtual DOM，重新渲染的过程中，减少性能的消耗。。

不同点：

1.   Vue默认支持双向数据绑定的，react提倡的是单向数据流，他称之为 onChange/setState()模式。

1. Vue更加简单灵活，适用于小型项目开发。构建大型应用时使用React鲁棒性更好。
2. Vue 通过 getter/setter的劫持，能精确知道数据变化的位置，不需要重新渲染整个组件树。React状态被改变时，子组件会重新渲染，会降低性能。（这可以通过（PureComponent/shouldComponentUpdate）这个生命周期方法来进行控制）
3. 状态管理vue的Vuex的数据是可变的，可以直接修改。React的Redux 数据是不可变的，Redux每次都是用新的state替换旧的state。在检测数据变化的时候，Redux 是通过 diff 的方式比较差异的，而Vuex是通过 getter/setter来比较的

 

1. 在 Vue 中我们组合不同功能的方式是通过 mixin密辛，而在React中我们通过 HoC (高阶组件）。React 最早也是使用 mixins 的，不过后来他们觉得这种方式对组件侵入太强会导致很多问题，就弃用了 mixinx 转而使用 HoC，

react中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。

但是在Vue中，由于模板中使用的数据都必须挂在this 上进行一次中转，所以我们import 一个组件完了之后，还需要在components中再声明下，这样显然是很奇怪但又不得不这样的做法。
框架实际没有好坏之分

 

1. Vuex 和 Redux 的区别

多个视图依赖于同一状态，这个状态又称为共享状态，vuex是对多个组件的共享状态进行集中式的管理(读/写)

从实现原理上来说，最大的区别是两点：

Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改

Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化）

 

store 注入和使用方式有一些区别。

1.在 Vuex 中，$store 被直接注入到了组件实例中，因此可以比较灵活的使用：使用 dispatch 和 commit 提交更新，

通过 mapState 或者直接通过 this.$store 来读取数据

在 Redux 中，我们每一个组件都需要显示用 connect 把需要的 props 和 dispatch 连接起来。

2. Vuex 更加灵活一些，组件中既可以 dispatch action 也可以 commit updates，而 Redux 中只能进行 dispatch，并不能直接调用 reducer 进行修改。

vuex详解： 在线文档: https://vuex.vuejs.org/zh-cn/

都是对象

• state: 它应该是唯一的，驱动应用的数据源，管理的状态对象：

const state = {xxx: initValue}

• mutations包含多个直接更新 state 的方法(回调函数)的对象，由action 中的 commit('mutation 名称')来触发。 只能包含同步的代码, 不能写异步代码。
  const mutations = {   yyy (state, {data1}) {// 更新 state 的某个属性}   }
   
• actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)，包含多个事件回调函数的对 象。 通过执行: commit()来触发 mutation 的调用, 间接更新 state
  谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz'
  可以包含异步代码(定时器, ajax)
  const actions = {
  zzz ({commit, state}, data1) {
  commit('yyy', {data1})
    }
  }
• Getters： 包含多个计算属性(get)的对象。通过组件中: $store.getters.xxx读取:
  const getters = {
  mmm (state) {
  return ...
  }
  }

 Modules： 可以有多个 module。一个 module 是一个 store 的配置对，与一个组件(包含有共享数据)对应
最后 向外暴露 store 对象
export default new Vuex.Store({
state,mutations,actions,getters })

组件中使用：

通过 mapState ：{{xxx}} {{mmm}} @click="zzz(data)"或者直接通过 this.$store 来读取数据

 import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapState(['xxx']),
...mapGetters(['mmm']),
}

 methods: mapActions(['zzz'])
}

映射 store
import store from './store'
new Vue({
store
})

所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象，属性有state: 注册的 state 对象，getters: 注册的 getters 对象

DOM和虚拟DOM的区别

Virtual DOM是真实DOM的抽象，用JS对象的形式，来模拟页面上的DOM嵌套关系。如果需要改变任何元素的状态，先在Virtual DOM上进行改变，比较两棵虚拟DOM树的差异，得到差异对象，把差异对象应用到真正的DOM树上，而不是直接改变真实的DOM。Virtual DOM 有更好的跨平台性。

区别

·DOM：浏览器中，提供的概念；用JS对象，表示页面上的元素，并提供了操作元素的API

·虚拟DOM：是框架中的概念；而是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系

·本质： 用JS对象，来模拟DOM元素和嵌套关系

·目的：就是为了实现页面元素的高效更新

按需渲染页面(只重新渲染排序中需要更新的数据所对应的页面元素)