1.v-show with v-if the difference
v-show is hidden css, v-if the direct destruction and creation, it is suitable for frequent switching with v-show
2. Calculate the difference between the properties and watch
Property is calculated automatically monitor changes rely on the value, which returns the contents of dynamic, listening is a process, a change in the value of listeners, can trigger a callback, and do something about it.
So the difference comes from the usage, just need dynamic values, then use the calculation attribute ; the change needs to know the value of the implementation of business logic, only with watch, or mixed with anti although feasible, but they are not the correct usage.
To say what the difference would be a plus
When an object is computed, it has what options?
computed and methods What is the difference?
Whether the computed data can rely on the other components?
watch is an object, it has what options?
There are two options to get and set
methods is a method that can accept parameters, and can not be computed, computed can be cached, not methods.
It can be computed independent of other computed, or even other data components
watch Configuration
handler
Whether deep depth
immeditate whether to execute immediately
to sum up
When there is some data need some additional data along with the time change, we recommend using computed.
When there is a common response to the changed data when the business logic to perform some or asynchronous operation when recommended watcher
3. Event Modifier
Bind a native click events, plus native,
Other event modifier
stop (stop the event bubbling) prevent (to prevent the default event) self (only their trigger, sub-assemblies will not trigger)
Key combination
click.ctrl.exact only when it is pressed ctrl trigger
4. The principle of two-way binding
Achieved through a subscription model and publish data hijacking mode, the core of the API is to hijack each attribute setter / getter, published by Object.defineProperty () when the data change messages to subscribers, triggers the corresponding callback listener, which is why Vue .js 2.x reason IE8 is not supported. To achieve two-way binding, first data hijacking, it is necessary to set up a listener Observer, used to listen to all properties. If the property is changed, you need to tell subscribers Watcher to see if needs to be updated. Because a lot of subscribers, so you need a special message subscriber Dep to collect subscribers, and unified management between listeners and subscribers need a last command parser Compile, for each node element for scanning and parsing, the relevant instructions (v-model, v-on ) corresponds to initialize a subscriber Watcheer, and replace the respective function or bind the template data
Official website explained: https://cn.vuejs.org/v2/guide/reactivity.html
The individual appreciated how data flows
It's about communication prop assembly passed to the parent component sub-assemblies, sub-assemblies can not be changed in the prop, you can only change the parent component prop, otherwise it will error. When subcomponents want to change, you can only distribute a custom event by $ emit, after receiving the parent component, modified by the parent component.
In general, sub-assemblies for the scene you want to change the parent component states, there are two options:
Copy data of a sub-assembly prop, data can be modified, but not prop:
exportdefault{props: {value:String}, data () {return{currentValue:this.value } }}复制代码
If the value is prop conversion, can be calculated using properties:
exportdefault{props: ['size'],computed: {normalizedSize:function(){returnthis.size.trim().toLowerCase(); } }}
6. Description of vue of state management and show that you place in a project which uses
mapactions component or by a method of the type and dispatch load transmitted actions, actions performed after receiving the service processing by the commit process and the type of the load transmitted mutations, mutations do business processing, but depending on the type and state of the load will receive mutating data, component data warehouse get updated by mapgetters.
In the method using assembly methods mapactions takeover, receives attribute computed by calculating mapgetters, this action is mainly to more compact, easy to post iteratively updated. The following examples were to deepen understanding through the official network:
7. Description of the life cycle of the hook
vue instance process from creation to destruction, is life cycle. From the beginning of creation, initialization data, compiled templates, mount DOM, rendering, re-rendering update, and finally to a series of process and so is the destruction of the life cycle.
beforeCreate : Observations and data initialization event has not started
The Created : the completion of data observation operations, properties, and methods, initialization event, $ el property not show up
beforeMount: front mount call, appropriate render first call. Examples of template compilation has been completed, the Data in the data and the template has been generated HTML, but did not speak to mount the HTML page
Mounted:. Vm el newly created $ el replaced, and mount it to invoked the example above. Examples have done the following configuration: The above replaces el compiled HTML DOM element attribute points. Complete template HTML rendering HTML page. This process ajax interaction.
beforeUpdate:发生在虚拟dom和打补丁之前，可以在该钩子中进一步修改状态，不会触发附加的冲渲染过程。
Updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
8.组件中如何通信
九叔说要讲半小时左右：。。。。
父到子：
传<子组件 :自定义属性=“父数据”>
收：子组件选项props：【‘自定义属性’】
子到父：
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件
非父子，兄弟组件通讯：
可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。
9.路由守卫是什么，有几种方式
全局守卫，路由独享守卫，组件内部守卫；
全局守卫：
router.beforeRouteEnter(to,from,next){前置守卫，进入}
router.beforeRouterLeave(to,from,next){后置守卫，离开}
to 目标路由 from 当前路由
next函数：next() == next(true) 运行跳转
next(false) 不让跳转
next('字符路径')/next({对象路径}) 重定向
路由独享守卫：没有后置守卫
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
组件内部守卫：
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) { 前置
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteLeave (to, from, next) { 后置
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
10.vue的优化
不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退
11.什么是插槽或内容分发 ，插槽有几种方式
组件内部保留槽位:
具名槽位:<slot name=槽名
匿名槽位: <slot></..>
调用组件插入内容: 内容 == dom | 组件
<组件名>
<template #槽名> 内容 | <组件名>
<template v-slot:槽名>内容
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译
12.简述下mvvm和MVC
MVC：
1.View 传送指令到 Controller
2.Controller 完成业务逻辑后，要求 Model 改变状态
3.Model 将新的数据发送到 View，用户得到反馈
MVP：
1. 各部分之间的通信，都是双向的。
2. View 与 Model 不发生联系，都通过 Presenter 传递。
3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
MVVM：
和MVP很像，采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然
13.路由懒加载，异步路由，分片打包
原理: 把组件封装到一个函数内部，路由激活时，调用该函数，函数内部 异步加载目标组件并返回
路由配置router.js:
a)
- import home from "../components/home.vue"
+ const home =()=>import("../components/home.vue");
{path:'/home', component: home }
b)
{path:xxx, component: r => { require(['./login/Login'], r) }}
15.vue的数据是响应式的，请问什么时候是非响应式的并如何解决
a:数组数据：
问题1：通过改变长度，利用索引直接设置跟项
解决：Vue.set(数组对象, key, value) | vm|this.$set(数组对象, key, value)
问题2：对数组使用了非变异 (non-mutating method) 方法（返回的了新数组）
解决：对象合并
对象数据变化：
问题：问题：data:{a:1}；a 数据是响应式的；vm.b='qq'; b 属性不是响应式的
解决：Vue.set(对象, key, value) | vm|this.$set(对象, key, value)
总结：数据一开始就应该出现在data里，数组里面永远不要放置简单性数据
16.如何编写一个自定义指令
指令是个函数或者对象，用来操作dom，指令内部的this指向window；
a:全局指令 Vue.directive（指令名称不带v-,回调（el,bingding））
el:dom元素；binding是个对象，含有传入的参数，binding。value
b:局部 定义在选项里面
directives:{
指令名不带v- : 函数(el,binding){}
}
17.如何自定义事件
定义：vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
销毁：vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )
触发: vm.$emit(自定义事件名1,参数)
自定义事件名： 使用 kebab-case 的事件名
场景： 在一个组件实例上手动侦听事件时
18.懒加载，按需加载，点击加载，滑动加载
把组件加载封装在一个函数中，路由激活的时候调用这个函数，这个函数在运行的时候去加载这个组件。加载用import或者requireAPI
19.如何更改计算属性并响应式
计算属性的set方法
20.vue的diff算法
突然发现弄懂这个就不是初级了。。。
Author: Care _59bf
link: https: //www.jianshu.com/p/875c9069dfc2
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.