前端面试题 (四) :

站在月亮上Da  ...

---

详述组件通信

            父传子 - 

                在组件标签上通过自定义属性的形式:list="item"绑定数据，然后在子组件中通过props接收props:["list"]

示例：

//组件标签    -    父组件

        

//子组件    -    接收

        props: [ 'list' ],

子传父  -  

        在子组件中通过this.$emit('自定义事件名称', '要传递的数据')，完成子组件配置

        在子组件的组件标签上通过@自定义事件名称="事件处理函数"，来完成父组件接收的任务

//子组件    -    

            发射this.$emit('receive', val)

            第一个参数：“自定义事件名称”；第二个参数：你要传递的数据

//父组件    -    接收  

        

兄弟

            可以借助于父组件作为中转完成通信 子 > 父 > 子   ( 不过特别麻烦 )

中央通信

        在要传递数据的组件通过$emit(自定义事件名称，要传递的数据)

// select - listi

mportbusfrom'../../main'

selectVal (val) {      

    bus.$emit('reveive', val)  

  }       

在目标组件通过$on进行监听接收$on('自定义事件名称', 回调函数)

// select - input

importbusfrom'../../main'

bus.$on('reveive', val => {

        console.log(val)this.value = val 

})   

PS：$emit & $on都要挂载到Vue空实例上，而这个空实例要全局使用因此需要在main.js创建

// main.js

let  bus =newVue()

export default  bus 

keep-alive组件的作用

                他是Vue内置的一个组件 ， 可以使被包含的组件保留状态，或避免重新渲染

                ( 也就是说 包裹动态组件，缓存不活动组件实列，但不销毁它们 )

---

单页面应用和多页面应用区别及优缺点

 单页面用户体验好，内容改变不用重新加载整个页面，前后端分离，并且页面特效比较炫酷，但是不利于seo，初次加载比较费时，页面复杂度提高很多

多页面   利于seo  开发成本较低但是页面重复代码多，维护成本相对复杂，刷新方式 整页刷新

---

什么是计算属性？什么情况使用？

 vue 的 计算属性  computed

官方文档对计算属性的描述是：

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

---

computed、methods的区别

                他们得到最终结果是完全相同的，不同的是 computed 它 依赖于进行缓存，至于相关依赖发生关系才会改变他们重新求值，而methods则出发重新渲染，调用方法会再次执行函数

---

查看更多...