vue复习(一)

vue复习(一)

1. Vue的钩子函数

beforeCreate 组件被创建之前，
created 组件被创建
beforeMount 挂载之前
mounted 挂载完成，可以在这里做异步请求
beforeUpdate 更新之前
updated 更新完成
activated : keep-alive 缓存的组件激活时调用
activated : keep-alive缓存的组件停用时调用
beforeDestory 销毁之前
destoryed 销毁完成，定时器和事件监听在此移除

2. Vue 第一次加载页面触发的钩子函数有哪些

beforeCreate
created
beforeMount
mounted

3. data在组件中是返回对象函数的原因
data为对象时，对象时引用数据类型，当组件被复用，数据对象都指向同一个data，当在其中一个组件中修改data，其他复用的组件中的data也会被修改；当使用返回对象的函数时，每次都返回一个新的object实例，引用的地址不同，就不会出现一组件中数据修改其他复用组件中的数据相应的发生变化。

4.vue指令

v-text 需要更新的文本
v-html 也要更新的标签
v-if 条件渲染
v-else
v-else-if
v-show 条件渲染
v-bind 动态绑定，如数据动态

let imgSrc = "ahdsbsf.com"
<img v-bind:src="imgSrc" />
简写：<img :src="imgSrc" />

v-on 事件绑定
v-for 列表渲染,需要一个key
v-model 数据的双向绑定
v-solt 插槽
v-once 只渲染组件和元素一次

5. v-if 和v-show 的异同

共同点：v-if 和 v-show 都能实现元素的显示隐藏
不同点：
1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件 渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；
2. v-show 有更高的首次渲染开销(显示/隐藏)，而 v-if 的首次渲染开销要小的多；
3. v-if 有更高的切换开销，v-show 切换开销小；
4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
5. v-if 可以搭配 template 使用，而 v-show 不行
6.当v-for和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

6. 修饰符

v-model ：
.lazy 取代 input 监听 change 事件
.number 输入字符串转为有效的数字
.trim 去掉首尾空格
事件修饰符：
.stop 调用 event.stopPropagation() 阻止冒泡。
.prevent 调用 event.preventDefault() ，阻止默认事件。
.capture 事件捕获
.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once 只触发一次回调。
鼠标修饰符：
.left 只当点击鼠标左键时触发。
.right 只当点击鼠标右键时触发。
.middle 只当点击鼠标中键时触发。
键盘修饰符：这个比较多，就不列举了

<!-- 停止冒泡 -->
<button @click.stop="fn"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="fn"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="fn"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="fn1"></button>

7. v-for为什么需要一个key

提高元素的辨识度，如当我们在对DOM进行删除操作的时候，就不会出我们想删除的元素未被删除

8. 导航守卫

全局导航守卫
router.beforeEach全局前置守卫，有to, from, next三个参数：
to: 即将要进入的目标 路由对象
from: 当前导航正要离开的路由
next:进行管道中的下一个钩子，next()

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach 全局后置钩子

组件守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const fn = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 fn 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

独享守卫

beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

9. watch 和computed 的区别

watch主要是监听数据变化，可以监听数据来源的三个部分：props,data,computed内的数据，然后它还提供两个参数（newvalue,oldvalue)顺序一定是新值、旧值。
computed主要是处理逻辑运算，computed来存储需要处理的数据值，它有存储的机制，只有当依赖的数据改变时才执行，变量不需要在data定义。

10.数据双向绑定的原理

vue 双向数据绑定是通过 数据劫持结合发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；
简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；