目录
- vue中，watch、methods、computed有什么区别
- v-if和v-show有什么区别
- 组件是怎么封装的
- 讲下前端工程化
1. vue中，watch、methods、computed有什么区别
computer
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。
<p id="app">{
{
fullName}}</p>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
计算属性默认只有getter，可以在需要的时候自己设定setter：
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。
computed擅长处理的情景：一个数据受多个数据影响。
一个受影响的数据，在这多个依赖数据中，任何一个改变都会导致受影响数据的改变。
watch
watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。直接引用文档例子：
var vm = new Vue({
el: '#app',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
适用场景：
watch擅长处理的情景：一个数据影响多个数据。
一个依赖数据，多个受依赖的数据的改变而改变的“受影响”数据。
methods
方法，跟前面的都不一样，我们通常在这里面写入方法，只要调用就会重新执行一次，相应的有一些触发条件，在某些时候methods和computed看不出来具体的差别，但是一旦在运算量比较复杂的页面中，就会体现出不一样。
需要注意的是，computed是具有缓存的，这就意味着只要计算属性的依赖没有进行相应的数据更新，那么computed会直接从缓存中获取值，多次访问都会返回之前的计算结果。
总结：
在computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。
计算是通过变量计算来得出数据。而观察是观察一个特定的值，根据被观察者的变动进行相应的变化，在特定的场景下不能相互混用，所以还是需要注意api运用的合理性和语义性。
2. v-if和v-show有什么区别
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。
需要注意的是，当一个元素默认在css中加了display：none属性，这时通过v-show修改为true是无法让元素显示的。原因是显示隐藏切换，只是会修改element style为display:""或者display:none，并不会覆盖掉或修改已存在的css属性。
- 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
- 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
- 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存，编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
- 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
- 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
3. 组件是怎么封装的
平时怎么封装就怎么答，没固定答案！
4. 讲下前端工程化
前端工程化，字面意思理解，就是以工程化方法规范和指导前端日常开发，为前端工作赋能，使其不仅仅局限于应用开发，而是掌控从开发、构建、到发布的完整链路，同时以系统、严谨、可量化的方法助力开发工作，确保开发效率和交付质量。
前端工程化的发展历程是从刀耕火种的原生js时代开始，出于工程化思想，逐渐诞生jQuery框架，bootstrap组件库，grunt，gulp，webpack等构建工具，react、vue等响应式框架应运而生，到现在发展出了更先进的低代码，Serverless等工程理念。
前端框架理念：历经了jQuery，bootstrap插件化，到CMD，ESM等模块化，到如今的React，Vue组件化的过程。
随着node.js的出现和流行，前端构建工具也实现了从任务化的grunt/gulp，发展到现在系统化的webpack，vite等主导工具。
构建工具和前端框架相辅相成，构建工具让前端框架百花齐放，各种类库无缝合作；框架、类库的发展也同时影响了构建工具，比如模块加载方案的演进，CSS预处理，甚至CI/CD一套完整的前端开发流程有：开发->测试->构建->部署->监控
在这五个阶段中工程化的思想均有不同程度的体现，具体表现为：
- 开发阶段：前端工程项目脚手架cli；可复用的UI组件库；第三方包，工具模块；团队代码风格约束eslint和prettier；自动化生成模板路由的工具；以及不得不提的开发阶段构建工具如webpack，可以提供语法校验、打包编译、热更新、包缓存等功能，简化工作流程；
- 测试阶段：单元测试，静态扫描工具，自动化测试工具，网页性能测试工具
- 构建阶段：打包工具进行的代码校验，代码编译，合并压缩代码，拆分代码，图片处理，cdn缓存设置，ssr等极限优化
- 部署阶段：CI/CD持续集成（gitee page，github action）
- 监控阶段工程化：埋点，监控（后台管理系统的登录统计）
- 服务端衔接工程化：主要体现在BFS中间层，Serverless等
分解一下从六个方面回答：
- 概念字面意思理解，工程化方法；
- 发展：js,jquery,bootstrap,打包工具，react，vue，Serverless和低代码；
- node.js的横空出世；
- 开发流程：开发->测试->构建->部署->监控；
- 服务端衔接：BFF中间层；
- 展望未来低代码，Serverless
具体解释：
- 概念：以工程方法规范和指导前端开发，为前端工作赋能，打通开发，构建，发布全链路
- 发展历程：刀耕火种原生js -> 提效工具JQuery框架 和 bootStrap组件库 -> grunt，gulp，webpack等构建工具 -> react和vue等响应式框架 -> 面向未来的Serverless理念和低代码构建工具
- node.js：node.js的产生和流行，是前端工程化的催化剂，在node.js加持下，前端开发工作者可以调用原生API，对构建、开发等过程拥有更多掌控权，催生了构建工具的流行和自动化工具的流行
- 开发流程：前端工程化之下的一个完整的开发流程是 开发->测试->构建->部署->监控
- 开发：首先在开发阶段，工程化主要体现在工程项目脚手架cli，可复用的UI组件库，webpack等构建工具支持下，对第三方包和模块的运用，commonjs和esmodule模块化规范，以及代码检查，包括语法检和代码风格分析，css预处理等
- 测试：单元测试，自动化测试工具，网页性能检测工具
- 构建：代码校验，编译，压缩丑化，代码分离，cdn配置，ssr优化等
- 部署：CI/CD持续集成，自动部署
- 监控阶段：埋点，监控
- 服务端衔接过程：体现在中间层接口转化，mock数据敏捷开发，Typescript类型约束也算是前后端衔接的工程化体现
- 面向未来：Serverless（代表作leanCloud）低代码平台等