VUE05

最新推荐文章于 2022-12-06 17:01:10 发布

cxuyuanLch

最新推荐文章于 2022-12-06 17:01:10 发布

阅读量189

点赞数

文章标签： webpack javascript vue.js

本文链接：https://blog.csdn.net/cxuyuanlch/article/details/124978163

版权

1.watch的属性用箭头函数定义结果会怎么样？

不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文。
所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

2.Vue项目如果methods方法用箭头函数定义结果会怎么样？

最终结果是你怎么点都没反应，但并没报错，this指向当前执行的方法对象。为什么？
官方其实有说：不应该使用箭头函数来定义 method 函数 (例如 plus: () => sum.a++)。
理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined，至于watch可以自己测试下，其结果也是如此，不演示了。

3.在Vue项目如何配置favicon？

将 favicon 图片放到 static 文件夹下
用 vue-cli 搭建的Vue项目。
然后在 index.html 中添加：

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

刷新浏览器页面。
具体操作

4.babel-polyfill模块主要是做什么的？

简单来讲，babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。
babel polyfill 又是做什么的？

如果要解决API层面的问题，需要使用垫片。比如常见的有babel-polyfill、babel-runtime 和 babel-plugin-transform-runtime。

babel-polyfill通过向全局对象和内置对象的prototype上添加方法来实现的。所以这会造成全局空间污染。
babel-polyfill使用的两种方式
1、webpack.config.js 中：
配置webpack.config.js里的entry设置为entry: [‘babel-polyfill’,path.join(__dirname, ‘index.js’)]
2、业务 js 中：
在webpack.config.js配置的主入口index.js文件的最顶层键入
import ‘babel-polyfill’

两者打印出来的大小都是一样的，打包后大小是280KB，如果没有使用babel-polyfill，大小是3.43kb。两则相差大概81.6倍。原因是webpack把babel-polyfill整体全部都打包进去了。而babel-polyfill肯定也实现了所有ES6新API的垫片,文件一定不会小。
那么有没有一种办法,根据实际代码中用到的ES6新增API ,来使用对应的垫片,而不是全部加载进去呢?
是的，有的。那就是 babel-runtime & babel-plugin-transform-runtime，他们可以实现按需加载。