Vue基础

• 1.v-show和v-if的区别
  • 相同点：都是控制元素的显示和隐藏
  • 不同点：
  • ①v-show是通过css的display属性控制显示隐藏
  • ②v-if是通过DOM树的添加和删除
  • v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景
• 2.v-for中key的作用
  • 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素，key 的作用主要是为了高效的更新虚拟 DOM
• 3.vue中data为什么是函数
  • ①因为每个组件都是vue的实例，可以共享data属性，当data的值为同一个引用类型的时候改变其中一个会影响其他
  • ②组件写成一个函数，数据以函数返回值的形式定义。这样每复用一次组件，都是返回一份新的data，相当于返回一个新的数据空间，互不干扰。而单纯的写成对象的形式，会共用一份data，造成一变全变的结果
• 4.vue中双向绑定的原理
  • ①Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
  • ②当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
• 5.keep-alive的作用和被keep-alive声明的组件的生命周期
  • 1、生命周期函数：在被 keep-alive 包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。
  • ①activated 钩子：在在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
  • ②Activated 钩子调用时机： 第一次进入缓存路由/组件，在 mounted 后面，
    • beforeRouteEnter 守卫传给 next 的回调函数之前调用，并且给因为组件被缓存了，再次进入缓存
    • 路由、组件时，不会触发这些钩子函数，beforeCreate created beforeMount mounted 都不会触发
  • ③deactivated 钩子：组件被停用（离开路由）时调用：deactivated 钩子调用时机：
    • 使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁)，因为组件没被
    • 销毁，被缓存起来了，这个钩子可以看作 beforeDestroy 的替代，如果你缓存了组件，要在组件销
    • 毁的的时候做一些事情，可以放在这个钩子里，组件内的离开当前路由钩子 beforeRouteLeave =>
    • 路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated 离开缓存组件 => activated
    • 进入缓存组件(如果你进入的也是缓存路由)
• 6.vue的生命周期 以及周期含义
  • Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
  • ①beforeCreate
    • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • ②created
    • 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  • ③beforeMount
  • 在挂载开始之前被调用：相关的 render 函数首次被调用。
  • ④mounted
    • el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
  • ⑤beforeUpdate
    • 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
  • ⑥updated
    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  • ⑦beforeDestroy
    • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
  • ⑧destroyed
    • 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
• 7.vue什么时候操作DOM 比较合适？ 操作时发现有的组件获取不到怎么办？mounted不能保证所有的子组件都被挂载因此需要$nextTick
  • vue页面渲染是异步操作，在DOM更新的时候不能获取到数据，需要async、await 或者$nextTick实现异步操作
• 8.发送网络请求在那个函数中？
  • mounted函数
• 9.vue组件传值有哪些方式？
  • ①父组件向子组件传递数据
    • 父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可
  • ②子组件向父组件传值
    • 子组件通过 vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理
• 10.vue中改变数组内索引的值 ，数据不更新，如何处理？
  • push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
• 11.vuex的传值方式？
  • 当组件进行数据修改的时候我们需要调用 dispatch 来触发 actions 里面的方法。actions 里面的每个方法中都会有一个
  • 1、commit 方法，当方法执行的时候会通过 commit 来触 mutations 里面的方法进行数据的修改
  • 2、mutations 里面的每个函数都会有一个 state 参数，这样就可以在 mutations 里面进行 state的数据修改 ，当数据修改完毕后，会传导给页面，页面的数据也会发生改变
• 12.怎么捕获 Vue 组件的错误信息？
  • 1、errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出
  • 2、errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底
• 13.Vue 常用的指令都有哪些？并且说明其作用
  •  1、v-model 多用于表单元素实现双向数据绑定（同 angular 中的 ng-model）
  • 2、v-for 格式：v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng-repeat), 需要注意从 vue2 开始取消了$index
  • 3、v-show 显示内容 （同 angular 中的 ng-show）
  • 4、v-hide 隐藏内容（同 angular 中的 ng-hide）
  • 5、v-if 显示与隐藏 （dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false）v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
  • 6、v-bind 动态绑定 作用： 及时对页面的数据进行更改
  • 7、v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在 methods 里面
  • 8、v-text 解析文本
  • 9、v-html 解析 html 标签
  • 10、v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、 数组型 '[{red:"isred"},{blue:"isblue"}]'
  • 11、v-once 进入页面时 只渲染一次 不在进行渲染
  • 12、v-cloak 防止闪烁
  • 13、v-pre 把标签内部的元素原位输出
• 14.怎么在 watch 监听开始之后立即被调用？
  •  在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调