文章目录

• 1. vue 生命周期
• 2. VUE 中 computed 和 watch 的区别是什么/li>
• 3. 动态绑定 类名和样式
• 4. v-if 与 v-show 的区别
• 5. v-for 列表渲染
• 6. vue 组件间通信
• 7. 父子组件生命周期执行顺序
• 8. $nextTick
• 9. 插槽 slot
• • • 若希望父组件可以显示子组件data里面的数据呢/li>
• 10. 动态组件
• 11. 异步组件
• 12. keep-alive
• 13. 使用 mixin 抽离组件公共逻辑
• • • 优点
    • 缺点
• 14. vue2 与 vue3 生命周期的区别
• 15. vue2和vue3 的区别
• 16. v-for 循环为什么一定要绑定 key /li>
• 16. 组件中的 data 为什么要定义成一个函数而不是一个对象/li>
• 17. 谈谈你平时都用了哪些方法进行性能优化/li>
• 18. vue 实例是挂载到哪个标签上的
• 19. webpack/babel
• 20. 什么 vuex ,谈谈你对它的理解/li>
• 21. v-model 双向绑定
• 22. vue2 实现双向绑定的原理
• 23. Vue3.0 实现数据双向绑定的方法
• 24. 路由守卫
• 25. vue-router 实现懒加载
• 26. HashRouter 和 HistoryRouter的区别和原理
• 27. hash 和 history 哪个模式不会请求服务器
• 28. vue生命周期中异步加载在mouted还是created里实现
• 29. 为什么选择用vue做页面展示
• 30. 简单聊聊 new Vue 以后发生的事情
• 31. vue首屏白屏如何解决/li>
• 32. vue单页面和传统的多页面区别/li>
• 33. 路由跳转和location.href的区别/li>
• 34. mvc和MVP,mvvm的区别
• 35. 单页应用优缺点
• 36. 虚拟DOM和Diff算法
• 37. 框架带来的好处和弊端
• 38. v-for 和 v-if 为什么不能一起用(优先级比较)
• 39. Less 怎么定义变量
• 40. v-html 和 v-text
• 41. 使用Axios来设置请求头的方法
• 42. 在vue中watch和created哪个先执行什么/li>
• 43. vue封装组件注意事项
• 44. 二次封装axios
• • • • • 封装步骤
        • 2. 使用新的 axios 封装API
        • 使用封装后的axios
• 44. vue 引入组件的三种方式
• • • • 一、 普通引入方式
      • 二、 Vue异步组件技术
      • 三 、使用动态的import( )语法(推荐使用)
• 45. Vue动态加载组件的两类方式
• 46. vue中require与import的区别
• 47. native 修饰符的作用及使用方法
• 48. vue怎么实现依赖收集和派发更新
• • • • 依赖收集
      • 派发更新
• 49. Vue弹窗组件的实现
• 50. vue双向绑定是怎么实现的efineProperty(）的弊端
• • • • • 解决方案
• 51. 微前端框架有了解过吗
• 52. Vue2的数据监听原理 追问 :如何实现新增属性的监听 × 追问 :Vue3监听事件的原理
• 53. 父组件如何调用子组件方法
• 54. vue-router传递参数的几种方式
• 55. 对proxy的理解
• • • • • Proxy是什么/li>
• 56. vue封装组件

1. vue 生命周期

生命周期：Vue 实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom到渲染、更新到渲染、销毁等一系列过程

主要 8个阶段

2. VUE 中 computed 和 watch 的区别是什么/h1>

计算属性就是为了简化 template 里面模版字符串的计算复杂度、防止模版太过冗余。

它具有 缓存特性 computed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就 可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

主要用于监控 vue 实例的变化，它监控的变量当然必须在 data 里面声明才可以，它可以监控一个 变量，也可以是一个对象，一般用于监控路由、input 输入框的值特殊处理等等，它比较适合的场景是 一个数据影响多个数据，它不具有缓存性

• watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
• computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才 会重新计算。

除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算 属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch 也可以检测 computed 属性。

3. 动态绑定 类名和样式

比如有一个导航栏，里面有很多选项，需要鼠标在谁身上，谁就变色，就可以使用动态绑定的方式来实现
类名的动态绑定

4. v-if 与 v-show 的区别

1. v-if false 的元素不渲染—适用与不会经常改变显示和隐藏的元素，因为要创建DOM元素和销毁DOM元素，频繁切换的开销更大

2. v-show 不管条件是真或假，第一次渲染的时候都会编译出来，也就说标签都会添加到DOM中。为这些元素添加内联样式 display：none 让它们不显示—适用于经常要切换显示隐藏效果的元素，因为只需要操作css样式display来控制元素的隐藏和显示
   

   
   

   总结：父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

   2.子组件向父组件传值（通过事件形式）
   接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。
   

   

   总结：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

   方法二、$ emit / $ on
   这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

   1.具体实现方式：

   2.举个例子
   假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据

   来源：无敌培根卷

   声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！