Talk about what is MVVM?
1 这 MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也
可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转
化成 UI 展现出来，View 是一个同步 View 和 Model 的对象
2 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，
Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而
Model 数据的变化也会立即反应到 View 上。
3 对 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的
同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作
DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。What is the difference between mvvm and mvc? What is the difference between it and other frameworks (jquery)?
1.这 mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成
mvvm 中的 ViewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速
度变慢，影响用户体验。
2. 区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。
3. 场景：数据操作比较多的场景，更加便捷Understanding of vue?
vue.js is a progressive framework for building user interfaces.
It is characterized by two-way binding of data and componentized development.
What are the advantages of vue?
1. 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"
View "上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻
辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注
于页面设计。
4. 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写What technologies are used in the vue-cli project for building vue, and what are their functions?
vue.js: vue-cli 工程的核心，主要特点是 双向数据绑定 和 组件系统
vue-router: vue 官方推荐使用的路由框架
vuex: 专为 vue.js 应用项目开发的状态管理器，主要用于维护 vue 组件间共用的一些变量和
方法
axios（fetch、ajax）:用于发起 GET、 POST 等 http 请求，基于 Promise 设计
webpack: 模块加载和 vue-cli 工程打包器
eslint 代码规范工具Common modifiers for vue?
v-model 修饰符：
.lazy：输入框改变，这个数据就会改变，这个修饰符会在光标离开 input 框才会更新数据
.number：营先输入数字就会限制输入只能是数字，先字符串就相当于没有加 number，注
意，不是输入框不能输入字符串，是这个数据是数字
.trim：输入框过滤首尾的空格
事件修饰符：
.stop：阻止事件冒泡，相当于调用了 event.stopPropagation()方法
.prevent：阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a 标签的跳转就是默认事件
.self：只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个 div里面有个按钮，div 和按钮都有事件，我们点击按钮，div 绑定的方法也会触发，如果div 的 click 加上 self，只有点击到 div 的时候才会触发，变相的算是阻止冒泡
.once：事件只能用一次，无论点击几次，执行一次之后都不会再执行
.capture：事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
.sync：对 prop 进行双向绑定
.keyCode：监听按键的指令，具体可以查看 vue 的键码对应表What is the principle of vue's two-way data binding?
Through Object.defineProperty, recursively traverse the data attribute, and give each attribute getter and setter
Implement the compile parsing template command, replace the variables in the template with data, then initialize the rendering page, and bind the update function. Every node that uses data data is a subscriber watcher, and finally uses watcher to support the communication bridge between Observe and compile, so as to achieve data change -> view update, view interaction change input -> data model change Two-way binding.
What is the principle of Vue's two-way data binding?
Vue.js uses data hijacking combined with publisher-subscriber mode,
hijacks the setter and getter of each property through Object.defineProperty(), publishes a message to the subscriber when the data changes, and
triggers the corresponding monitoring callback
What are the hook functions of vue?
beforecreate created beforeMount mounted beforeupdate updated beforeDestroy Destroyed component keep-alive
How to use event object in vue event?
1. 获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号
2.默认情况下，没有给事件函数传参默认参数event是原生事件对象.What are the similarities and differences between the v-show and v-if directives?
The v-show directive modifies the displayCSS property of the element to display or hide it.
The v-if instruction directly destroys and rebuilds the DOM to achieve the effect of showing and hiding elements.
How does a child component call a parent component in vue?
直接在子组件中通过 this.$parent.event 来调用父组件的方法。
在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
父组件把方法传入子组件中，在子组件里直接调用这个方法。Use of $nextTick?
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，
然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到
调用它的实例上
this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成 DOM 对象之后的操作有很
大的优势The role of the key value in vue?
key 值：用于 管理可复用的元素。因为 Vue 会尽可能高效地渲染元素，通常会复用已有元
素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求The priority of v-for and v-if?
v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在
v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中
同时使用。What is the structure of vue?
Every vue.js application is implemented by instantiating the constructor Vue().
The constructor vue accepts multiple configuration options, among which el is to mount the Vue instance into the DOM, data is the data of the vue instance, methods is the method, computed is the computed property, watch is the listener, and life cycle, etc.
Tell me about your understanding of vue-router?
Vue-router is the routing of Vue. Its function is to access different components according to different paths, and it can realize the transmission of data between routes without refreshing the page.
Understanding of componentization?
Componentization means that every part of a page can be extracted and encapsulated into components. Components are files with the suffix .vue
Talk about your understanding of hash and history in vue
Hash mode: in the browser with # sign, # and the following characters are called hash, read through window, location, hash.
Features: Although the hash is in the url, it is not included in the Http, and has no effect on the backend, so changing the hash will not refresh the page
History mode: history adopts the new features of HTML5, and provides two new methods: pushstate() and replacestate(), which can modify the browser history stack, and monitor state changes of popstate events.
Steps to use plugins in vue?
Use the import ... from ... syntax of ES6 or the require() method of CommonJS to import plug-ins. Use the global method Vue.use(plugin) to use plug-ins, you can pass in an option object Vue.use(MyPlugin, { someOption: true })
In Vue, the parent component triggers the function of the child component, and the child component triggers the function of the parent component?
Obtain child component functions in parent components: $children, $refs Obtain parent component functions in child components: $parent
Which hooks are triggered on the first page load?
beforeCreate， created， beforeMount， mounted
What is the difference between $route and $router?
$router 是 VueRouter 的实例，在 script 标签中想要导航到不同的 URL,使用$router.push
方法。返回上一个历史 history 用$router.to(-1)
$route 当前 route 跳转对象。里面可以获取当前路由的 name,path,query,parmas 等。
Vue transfer data
vue父组件通过props属性向子组件传递数据
子组件通过$emit方法触发自定义事件像父组件传递事件
对于全局状态数据可以通过Vuex管理
How does Vue get dom?
通过ref属性，获取原生DOM元素 或 组件实例.
ref="domName" 用法：this.$refs.domName
What is vue-loader? What are the uses for it?
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
Why is it recommended to add Key in v-for?
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。
Briefly describe the usage scenarios of computed and watch respectively
答：computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
例子：搜索数据
The two core points of vue
答：数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。
The difference between vue and jQuery
答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以
更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖
DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，
他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
Briefly describe which scenarios are suitable for each cycle
答：
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。
不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
How to define the dynamic routing of vue-router? How to get the passed value?
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。What is the difference between caching of computed properties and method invocation?
我们可以将同一函数定义为一个方法或是一个计算属性。两种方式的最终结果确实是完全相
同的。不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会
重新求值。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
使用计算属性还是 methods 取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用
计算属性，除非你不希望得到缓存。
计算属性是根据依赖自动执行的，methods 需要事件调用
What is vuex? how to use? Which functional scenarios use it?
只用来读取的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事
物；异步逻辑应该封装在 action 中。
在 main.js 引入 store，注入。新建了一个目录 store，… export
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
What are the attributes of vuex?
分别是 State、 Getter、Mutation 、Action、 Module
state：Vuex 使用单一状态树,即每个应用将仅仅包含一个 store 实例，但单一状态树和模
块化并不冲突。存放的数据状态，不可以直接修改里面的数据
mutations：mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据
getters：类似 vue 的计算属性，主要用来过滤一些数据
action：actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据
的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action
Module：项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、
getters，使得结构非常清晰，方便管理