什么是vue
vue是通过JavaScript封装的一套前端框架，有自己独特的API和开发模式。
vue开发的是一个单页应用(SPA)，所谓单页应用开发模式就是我们不需要跳到新的页面，只需要在一个模板上加载和卸载不同的子模板来显示不同的页面。
生命周期
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期
beforeCreate：创建实例之前，还未初始化（加loading事件）created： 实例创建完成 (可以拿到data下的数据以及methods下的方法)beforeMount：渲染dom之前 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。mounted：vue 实例挂载完成 内存中的模板，已经真实的挂载到了页面中beforeUpdate：重新渲染之前 ，当 data 变化时触发，data 数据尚未和最新的数据保持同步。updated： 重新渲染完成 ，当 data 变化时触发 页面和 data 数据已经保持同步了。beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用destroy：实例销毁后调用。对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
第一次页面加载会触发哪几个钩子
beforeCreate,created,beforeMount,mounted
vue获取数据一般在哪个生命周期
createdbeforeMountmounted
created和mounted的区别
created：在模版渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图mounted：在模版渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
vue的优点
- 轻量级
- 低耦合
- 可重用性
- 独立开发
- 文档齐全，且为中文文档
vue父子组件传递数据
porps：父传子
$emit ：子传父
v-if 和 v-show指令的共同点和不同点
共同点：都是动态显示DOM元素
不同点：
- v-if是动态的向DOM树内添加或者删除DOM元素
- v-show是通过设置DOM元素的display样式属性控制显示隐藏
- v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件
- v-show只是简单的基于css切换
性能消耗- v-if有更高的切换消耗
- v-show有更高的初始渲染消耗
使用场景- v-if 适合运营条件不大可能改变
- v-show 适合频繁切换
如何让css只在当前页面中起作用
scoped
说出几种常用的vue指令以及他们的作用
-
v-if：条件渲染指令，他根据表达式的真假来删除和插入元素 -
v-for：基于一个数组渲染一个列表 -
v-bind：用于绑定数据和元素属性 -
v-model：让表单元素和数据实现双向绑定 -
v-text：用于更新标签包含的文本 -
v-on：可以绑定事件的监听器，可缩写为@ -
v-text：解析文本
为什么用key
给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更加迅速
vue组件中data为什么必须是一个函数
因为jsvaScript的特性导致的，在component中，data必须以函数的形式存在，不可以是对象
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己的私有数据空间，他们只负责各个维护数据，不会造成混乱，而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改
vue的双向数据绑定是怎么实现的
vue 双向数据绑定是通过数据劫持，组合，发布订阅者模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也会跟着变化
- 核心： Object.defineProperty()方法
vue2.0
vuex是什么？vuex有哪几种属性
vuex是vue框架中的状态管路
有5种，State、Getter、Mutation、Action、Module
State：基本数据（数据源存放地）getters：从基本数据派生出来的数据mutations：提交更改数据的方法，同步actions：像一个装饰器，包裹mutations，使之可以异步modules：模块化Vuex
vue事件中如何使用event对象
获取事件对象，方法参数传递$event，注意在事件中要使用$符号
<button @click="Event($event)">事件对象</button>
组件传值方式有哪些
- 父传子：子组件通过
props['xx']来接受父组件传递的属性xx的值- 子传父：子组件通过
this.$emit('fnName',value)来传递，父组件通过接受fnName事件方法来接收回调- 其他方式：通过创建一个bus，进行传值
- 使用vuex
vue子组件调用父组件的方法？
- 直接在子组件中通过
this.parent.event来调用父组件的方法，在子组件里面用emit()向父组件触发一个事件，父组件监听这个事件就行了- 父组件把方法传入子组件中，在子组件里直接调用这个方法
怎样理解Vue单项数据流
数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改，这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解
注意：在子组件中直接用v-model绑定父组件传过来的props这样是不规范的写法，开发环境会报警告
解决方法：可以在data里面定义一个变量，并用prop的值初始化它，之后用$emit通知父组件去修改
路由的4种跳转方式
- router-link
不带参数
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">
<router-link :to="{ path: '/about'}"> //name,path都行, 建议用name
带参数
<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
- push()
//函数里调用
不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
query和params区别
- query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
- params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
- replace()
//跟router.push很像，唯一的不同就是，它不会向history添加新记录，而是跟它的方法名一样 —— 替换掉当前的history记录。
<router-link :to="..." replace> //声明式
this.$router.replace(...) //函数式
- go()
//这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)
// 后退一步记录，等同于 history.back()
this.$router.go(-1)
// 前进 3 步记录
this.$router.go(3)
nextTick是什么
是获取更新后的dom内容
computed、methods、watch有什么区别
computedvsmethods区别
computed是有缓存的methods没有缓存
computedvswatch
watch是监听，数据或者路由发生改变才可以响应（执行）computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回watch是当前监听到数据改变了，才会执行内部代码
