vue常见面试题

1.vue优点

1. 轻量化

使用 Vue.js 来开发生产应用或个人项目的一个显著优势是它是一个相对轻量化的框架/库。让我们看看不同前端框架/库的下载空间


2. 低复杂性

在使用 React 构建许多应用之后,一旦在混合代码库中添加状态管理,随着应用程序变大,代码库通常会变得非常复杂。我注意到 React 应用变得复杂的原因之一是 JSX 模板、 lifecycle(生命周期)方法和其他方法都存在于同一个对象中。这常常使理解逻辑流程变得非常困难,而Vue呢 :


3. Virtual DOM(虚拟 DOM)

就像 React 一样,Vue.js 实现了使用虚拟 DOM 来操作/渲染视图。通过使用虚拟 DOM,用户界面将通过在每次需要更改时不渲染真实的 DOM,而只是呈现虚拟 DOM 和真实 DOM 之间的部分差异,进而获得更好的性能。

4. 低学习曲线(对初学者友好)

从事 Web 开发的人都会学习以下三种基础技术:HTML、CSS 和 JavaScript。想象一下一个初学者必须学习一个叫做 JSX 的新东西,而不是 HTML。虽然 JSX 看起来类似于 HTML,但确实有很多不同之处将 JSX 与 HTML 区分开来,而这种学习就不是 Vue.js 所必需的。

如上面所示,Vue.js 使用与 HTML 相同的标记名,这使得将知识从 HTML 传输到 Vue.js 更加容易。此外,代码的模块化结构有助于理解 Vue.js 组件的不同动作部分。

对于那些熟悉 React 的人来说,学习 Vue.js 是小菜一碟,因为两者之间有很多相似之处。

2.vue父组件向子组件传递数据?

方式一

父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收

方式二

父组件触发子组件的方法,主要通过$refs来触发,同时传参

//触发子组件方法,并传参this.$refs.mychild.init("chrchr","120");


3.子组件像父组件传递事件

通过$emit触发事件

在子组件中触发事件:

export default {

  methods: {

    show: function () {

      console.log(this.name)

    },

    toSearchProduct: function () {

      this.$emit('parentEvent','哈哈啊哈哈')

    }

  }

}

父组件:

export default {

  components: {

    XTest

  },

  methods: {

    toClick: function (msg){

      console.log(msg) // 当子组件触发按钮时,msg获取值为 哈哈啊哈哈

    }

  }

}

4.v-show和v-if指令的共同点和不同点

1.共同点:都能控制元素的显示和隐藏。

2.不同点:实现本质⽅法不同,v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译⼀次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

3.总结:如果要频繁切换某节点,使⽤v-show(切换开销⽐较⼩,初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。


5.如何让CSS只在当前组件中起作用

当前组件