企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## 一. Vue核心小知识点(可以留言互动回答~简单) 1. vue中 key 值的作用 2. vue中子组件调用父组件的方法 3. vue等单页面应用及其优缺点 ## 二. `v-show`和`v-if`指令的共同点和不同点? * `v-show`指令是通过修改元素的displayCSS属性让其显示或者隐藏 * `v-if`指令是直接销毁和重建DOM达到让元素显示和隐藏的效果 ## 三. 如何让CSS只在当前组件中起作用? 将当前组件的`<style>`修改为`<style scoped>` ## 四. `<keep-alive>``</keep-alive>`的作用是什么? `<keep-alive>``</keep-alive>` 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用`<keep-alive>``</keep-alive>`进行缓存, 这样用户每次返回列表的时候,都能从缓存中快速渲染,***而不是重新渲染*** ## 五. Vue中引入组件的步骤? 1. 采用ES6的`import ... from ...`语法 或 CommonJS的`require()`方法引入组件 2. 对组件进行注册,代码如下 ~~~ 注册 Vue.component('my-component', { template: '<div>A custom component!</div>'}) ~~~ 3. 使用组件`<my-component>``</my-component>` ## 六. 指令v-el的作用是什么? 提供一个在页面上已存在的 `DOM` 元素作为 `Vue` 实例的挂载目标.可以是 `CSS` 选择器,也可以是一个 `HTMLElement` 实例, ## 七. 在Vue中使用插件的步骤 1. 采用ES6的`import ... from ...`语法 2. 使用全局方法`Vue.use( plugin )`使用插件,可以传入一个选项对象 `Vue.use(MyPlugin, { someOption: true })` ## 八. 请列举出3个Vue中常用的生命周期钩子函数? 1. ***created***: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, `$el`属性目前还不可见。 2. ***mounted***: el被新创建的 `vm.$el` 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 `vm.$el` 也在文档内。 3. ***activated***::`keep-alive`组件激活时调用。 ## 九. 请简述下Vuex的原理和使用方法 ![](https://box.kancloud.cn/37efe92109ba77a94e9fa6df6939809d_663x428.png) 数据单向流动 一个应用可以看作是由上面三部分组成: ***View, Actions,State***,数据的流动也是从**View => Actions => State =>View** 以此达到数据的单向流动。 但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的。 Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心。 Vuex的组成:一个实例化的`Vuex.Store`由**state**, **mutations**和**actions**三个属性组成: * state中保存着共有数据 * 改变state中的数据有且只有通过**mutations**中的方法,且**mutations**中的方法必须是同步的。 * 如果要写异步的方法,需要些在**actions**中, 并通过**commit**到**mutations**中进行state中数据的更改.