Vuex相关

时间 2019-11-07

标签 vuex 相关繁體版

原文原文链接

你知道路由钩子吗？
路由钩子分为全局钩子、路由独享钩子、组件内钩子，全局钩子用来拦截全部的路由的，进行处理，路由独享钩子，本质上和后面的组件内钩子是同样的。都是特指的某个路由。不一样的是，这里的通常定义在router当中，而不是在组件内。组件内钩子，是将钩子函数定义在组件内部了javascript

项目中若是涉及多个组件数据共享你如何解决？
能够启用vuexvue

vuex中的五个属性都是什么? 有什么做用？
State 存储数据
Getter 能够认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。
Mutation 更改 Vuex 的 store 中的状态的惟一方法是提交 mutation
Action 包含任意异步操做，经过提交 mutation 间接更变状态
Module 将 store 分割成模块，每一个模块都具备state、mutation、action、getter、甚至是嵌套子模块java

.react

Vue 实现数据双向绑定的原理：Object.defineProperty()

vue实现数据双向绑定主要是：采用 数据劫持结合发布者-订阅者模式 的方式，经过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应监听回掉。当把一个普通 JavaScript 对象传给Vue 实例来做为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty 将他们转为 getter/setter。用户看不到getter / setter ，可是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。vuex

vue的数据双向绑定将MVVM做为数据绑定的入口，整合Observer，Complie 和 Watcher三者，经过Observer来监听本身的model的数据变化，经过Complie来解析编译模板指令(vue中是用来解析 {{ }} ），最终利用watcher搭起observer和complie之间的通讯桥梁，达到数据变化 ==》视图更新，视图交互变化（input）==》数据model变动双向绑定效果。
js实现简单的双向绑定浏览器

<body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {}; Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue; document.getElementById('show').innerHTML = newValue; } }) document.addEventListener('keyup', function (ev) { obj.txt = ev.target.value; }) </script>

4、Vue 组件间的参数传递

1.父组件与子组件传值
父组件传给子组件：子组件经过props方法接受数据；
子组件传给父组件：$emit方法传递参数;
2.非父子组件间的数据传递，兄弟组件传值
EventBus，就是建立一个事件中心，至关于中转站，能够用它来传递事件和接受事件，项目比较小时，用这个比较合适；
VueX，建立一个数据仓库，整个项目全局均可以往这个仓库存放数据和读取数据缓存

5、Vue的路由实现：hash模式和 history模式
hash模式：在浏览器中符号 “#” 以及#后面的字符称之为hash，用window.location.hash读取；
特色：hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动做，对服务端安全无用，hash不会从新加载页面。安全

history模式：history 采用HTML5的新特性；且提供了两个新方法：pushState（）、replaceState（）能够对浏览器历史纪录栈进行修改，以及popState事件监听到状态变动。app

6、 Vue与Angular以及React的区别？
（版本不断更新，如下区别有可能不是很正确，个人工做中只用到vue，对angular和react不怎么熟）
1.与AngularJs的区别
相同点：都支持指令，内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定，都不支持低端浏览器；异步

不一样点：AngularJs的学习成本高，好比Dependency、Injecttion特性，而vue.js自己提供的API都比较简单、直观；在性能上，AngularJs依赖对数据作脏检查，因此watcher越多越慢；Vue.js使用基于依赖追踪的观察而且使用异步队列更新，因此的数据都是独立触发的。

2. 与React的区别
相同点：
React采用独特的JSX语法，Vue.js 在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，二者都须要编译后使用;中心实现相同：一切都是组件，组件实例之间能够嵌套；都提供合理的钩子函数，可让开发者定制化底去处理需求，都不内置列数Ajax，Route等功能到核心包，而是以插件的方式加载;在组件开发中都支持mixins的特性了；

不一样点：
React采用Virtual DOM会对渲染出来的结果作脏检查；Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷的操做Virtual DOM。

7、Vue路由的钩子函数

首页能够控制导航跳转，beforeEach，afterEach等。通常用于页面title的修改，一些须要登陆才能调整页面重定向功能。
beforeEach 主要的3个参数to，from，next；
to : route即将进入的目标路由对象、
from： route当前导航正要离开的路由、
next： function必定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。能够控制网页的跳转

8、Vuex是什么？怎么使用？那种功能场景使用它？

只要来读取的状态集中放在store中；改变状态的方式就是提交mutations。这是个同步的实物；异步逻辑应该封装中action中。
在main.js引入store，注入。新建一个目录store，...export。
场景有：单页面应用，组件之间的状态，音乐播放，登陆状态，加入购物车

vuex.jpg

state
Vuex 使用单一状态树，既每一个应用将仅仅包含一个store实例，单单一状态树和模块化并不冲突。存放的数据状态，不能够直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex的store中的状态或数据。
getters
相似vue的计算属性，主要用来过滤一些数据。
action
action能够理解为经过mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操做数据。view层经过store.dispath来分配action。

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment(context) { context.commit('increment') } } })

modeules
项目特别复杂的时候，可让每个模块拥有本身的state，mutation，action，getters，使得结构很是清晰，方便管理

const modulesA = { state: { ... }, mutations: { ... }, actions: { ... } } } const modulesB = { state: { ... }, mutations: { ... }, actions: { ... } } } const store = new Vuex.store({ modules: { a: modulesA, b: modulesB } })