前端基础的40个问题及答案【第21-30问】

前端基础的40个问题及答案【第21-30问】

21、javascript的内存（垃圾）回收机制？

• 垃圾回收机制的原理是找到不再继续使用的变量，释放其内存。垃圾回收器会按照固定的时间间隔(或代码中预定的收集时间)，周期性地执行这一操作;
• Javascript 会找出不再使用的变量，不再使用意味着这个变量生命周期的结束。Javascript 中存在两种变量——全局变量和局部变量，全部变量的声明周期会一直持续，直到页面卸载;
• 而局部变量声明在函数中，它的声明周期从执行函数开始，直到函数执行结束。在这个过程中，局部变量会在堆或栈上被分配相应的空间以存储它们的值，函数执行结束，这些局部变量也不再被使-用，它们所占用的空间也就被释放;
• 垃圾回收的两种实现方式：标记清除、引用计数

22、谈谈你对MVVM开发模式的理解？

MVVM分为Model、View、ViewModel三者。

• Model代表数据模型，数据和业务逻辑都在Model层中定义；
• View代表UI视图，负责数据的展示；
• ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。

这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

23、v-if和v-show有什么区别？

v-if 是动态添加，当值为false 时，是完全移除该元素，即dom 树中不存在该元素。
v-show仅是隐藏/ 显示，值为false 时，该元素依旧存在于dom 树中。

24、你使用过Vuex吗？

使用过–详细解释见
https://blog.csdn.net/u011608672/article/details/118637436

25、说说你对SPA单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；
取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点

1.用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
2.基于上面一点，SPA 相对对服务器压力小；
3.前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点

1.初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
2.前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理
3.SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

26、Class与Style如何动态绑定？

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

官方解释：https://cn.vuejs.org/v2/guide/class-and-style.html

27、怎样理解Vue的单向数据流？

数据从父级组件传递给子组件，只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。

所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会流动到子组件中，但是反过来不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。

这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台发出警告。

子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，有父组件修改。
来源：https://codeantenna.com/a/XMefjQj8kI

28、computed和watch的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

29、直接给一个数组项赋值，Vue能检测到变化吗？

不能
由于JavaScript的限制，Vue 不能检测到以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue是检测不到变化的

Vue不能检测到以元素赋值方式的数组变动是因为：

• 动态添加的数组项不能被劫持生成getter, setter，因此无法产生响应。
• 给数组每一项做劫持，性能低且笨拙

Vue能检测到数组变动的方法：

• 实际上，Vue对数组项的操作方法（pop, push, shifut, unshift, splice, sort, reverse）做了重写，这> 些方法可以改变数组

30、谈谈你对Vue生命周期的理解？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是Vue的生命周期。

各个生命周期的作用

• beforeCreate 组件实例被创建之初，组件的属性生效之前
• created 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el 还不可用
• beforeMount 在挂载开始之前被调用：相关的render函数首次被调用
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
• beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前 update 组件数据更新之后 activited keep-alive专属，组件被激活时调用 deactivated keep-alive 专属，组件被销毁时调用
• beforeDestory 组件销毁前调用 destoryed 组件销毁后调用