13. assets 和 static 的区别
相同点: assets 和 static 两个都是存放静态资源文件。项目中所 需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件 下,这是相同点
不相同点:assets 中存放的静态资源文件在项目打包时,也就是运 行 npm run build 时会将 assets 中放置的静态资源文件进行打包 上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后 的静态资源文件最终也都会放置在 static 文件中跟着 index.html 一同上传至服务器。static 中放置的静态资源文件就不会要走打包 压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。
因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是 static 中的资源文件由于没有进行压缩等操作,所以文件的体积也 就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据 更大的空间。
建议: 将项目中 template 需要的样式文件 js 文件等都可以放置在 assets 中,走打包这一流程。减少体积。而项目中引入的第三方的 资源文件如 iconfoont.css 等文件可以放置在 static 中,因为这 些引入的第三方文件已经经过处理,不再需要处理,直接上传。
14. delete 和 Vue.delete 删除数组的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的 键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
15. Vue 模版编译原理
vue 中的模板 template 无法被浏览器解析并渲染,因为这不属于浏 览器的标准,不是正确的 HTML 语法,所有需要将 template 转化成一 个 JavaScript 函数,这样浏览器就可以执行这一个函数并渲染出对 应的 HTML 元素,就可以让视图跑起来了,这一个转化的过程,就成 为模板编译。模板编译又分三个阶段,解析 parse,优化 optimize,生成 generate,最终生成可执行函数 render。
解析阶段:使用大量的正则表达式对 template 字符串进行解析,将 标签、指令、属性等转化为抽象语法树 AST。
优化阶段:遍历 AST,找到其中的一些静态节点并进行标记,方便在 页面重渲染的时候进行 diff 比较时,直接跳过这一些静态节点,优 化 runtime 的性能。
生成阶段:将最终的 AST 转化为 render 函数字符串。
16. vue 初始化页面闪动问题
使用 vue 开发时,在 vue 初始化之前,由于 div 是不归 vue 管的,所 以我们写的代码在还没有解析的情况下会容易出现花屏现象,看到类 似于{{message}}的字样,虽然一般情况下这个时间很短暂,但是还 是有必要让解决这个问题的。
首先:在 css 里加上以下代码:
如 果 没 有 彻 底 解 决 问 题 , 则 在 根 元 素 加 上 style="display:
none;" :style="{display: 'block'}"