Vue 面试题

数据渲染有几种方式

{{}}

v-text:渲染文本

v-html: 渲染文本，也能渲染标签

v-if和v-show的区别，以及出发的生命周期函数

v-show: 控制display属性的显示与不显示

v-if: 是控制dom的销毁与创建

v-if: 触发的生命周期 显示: 创建 挂载 隐藏: 销毁v-show:不触发生命周期钩子函数

v-if和v-for为什么不建议混合使用

被渲染的dom会重复一个创建和销毁的过程所以每次渲染和遍历整个列表会影响性能。

Vue 中常用的指令

v-if: 可以实现条件渲染
v-show: 控制display属性的显示与不显示
v-html: 渲染文本，也能渲染标签
v-text: 主要用来更新textContent.
v-else-if:充当v-i的else-if块，能链式的使用多次

v-else: 搭配在v-if或者v-else-if后面使用

v-on: 主要用来监听dom事件，简化@

v-bind: 用来动态的绑定一个或者多个特性

v-for: 用v-for指令根据遍历数组来进行渲染

v-model: 这个指今用于在表单上创建双向数据绑定

v-slot: 插槽
v-pre: 用来跳过这个元素和它的子元素编译过程

v-once: 只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化 更新性能

计算属性和实例方法的区别

计算属性有缓存，实例方法没有缓存计算属性调用时不可以传参，

实例方法调用时可以传参

v-model的修饰符

.lazy: 文本框失去焦点后在更新数据
.trim:清除前后空格
number: 从字符中获取数字

事件修饰符

.stop: 阻止事件冒泡
.once: 只执行一次，一次性事件
.self: 只处理自身事件
capture:事件捕获阶段发
prevent: 阻止浏览器默认行为
native :触发原生事件

9.父子组件怎样实现通讯

父传子: 在父组件里面的子组件标签内绑定一个属性在子组件内使用props接收
子传父:在子组件内使用this,Semit(子组件事件名参数,然后在父组件里面的子组件标签内使用@子组件事件名=父组件事件名

非父子组件之间传递参数

bus总线
兄弟组件可以父传子 子传父 pass
Vuex也可以实现数据共享(官方推荐使用vuex)本地存储

使用props限定传递的数据，属性

type: 限定传递的数据类型
Required: 是否必传 (布尔值)

Default: 指定默认值自定义函数: 必须其中一个

Vue中单向数据流的概念

子组件不能直接修改父组件传过来的值，要用this.Sparent才能修改

Vue 插槽

默认插槽:能够接受组件外部传给组件大段的HTML代
码<slot></slot>
具名插槽: 具有name属性的插槽可以结合template标签的slot属性，定向给插槽传递内容
作用域插槽:作用域插槽就是带数据的插槽，可以通过子组件绑定事件传递给父组件，控制HTML面板的显示与不显示