场景:一个长列表数据,一般不会更改,但是vue会做getter和setter的转换
用法:是ES5新增的特性，可以冻结一个对象，防止对象被修改
支持:vue 1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换
注意:冻结只是冻结里面的单个属性,引用地址还是可以更改
new Vue({ data: { // vue不会对list里的object做getter、setter绑定 list: Object.freeze([ { value: 1 }, { value: 2 } ]) }, mounted () { // 界面不会有响应,因为单个属性被冻结 this.list[0].value = 100; // 下面两种做法，界面都会响应 this.list = [ { value: 100 }, { value: 200 } ]; this.list = Object.freeze([ { value: 100 }, { value: 200 } ]); } })
32.调试 template
场景:在Vue开发过程中, 经常会遇到template模板渲染时JavaScript变量出错的问题, 此时也许你会通过console.log来进行调试
这时可以在开发环境挂载一个 log 函数
// main.js Vue.prototype.$log = window.console.log; // 组件内部 <div>{{log(info)}}</div>
33.vue-loader 小技巧
33.1 preserveWhitespace
场景:开发 vue 代码一般会有空格,这个时候打包压缩如果不去掉空格会加大包的体积
配置preserveWhitespace可以减小包的体积
{ vue: { preserveWhitespace: false } }
33.2 transformToRequire
场景:以前在写 Vue 的时候经常会写到这样的代码：把图片提前 require 传给一个变量再传给组件
// page 代码 <template> <div> <avatar :img-src="imgSrc"></avatar> </div> </template> <script> export default { created () { this.imgSrc = require('./assets/default-avatar.png') } } </script>
现在:通过配置 transformToRequire 后，就可以直接配置，这样vue-loader会把对应的属性自动 require 之后传给组件
// vue-cli 2.x在vue-loader.conf.js 默认配置是 transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } // 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改 avatar: ['default-src'] // vue-cli 3.x 在vue.config.js { vue: { transformToRequire: { avatar: ['default-src'] } } } // page 代码可以简化为 <template> <div> <avatar img-src="./assets/default-avatar.png"></avatar> </div> </template>
34.为路径设置别名
1.场景:在开发过程中，我们经常需要引入各种文件，如图片、CSS、JS等，为了避免写很长的相对路径（../），我们可以为不同的目录配置一个别名
2.vue-cli 2.x 配置
// vue-cli 2.x在vue-loader.conf.js 默认配置是 transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' } // 配置文件,如果是vue-cli2.x 在vue-loader.conf.js里面修改 avatar: ['default-src'] // vue-cli 3.x 在vue.config.js { vue: { transformToRequire: { avatar: ['default-src'] } } } // page 代码可以简化为 <template> <div> <avatar img-src="./assets/default-avatar.png"></avatar> </div> </template>
3.vue-cli 3.x 配置
// 在根目录下创建vue.config.js var path = require('path') function resolve (dir) { console.log(__dirname) return path.join(__dirname, dir) } module.exports = { chainWebpack: config => { config.resolve.alias .set(key, value) // key,value自行定义，比如.set('@@', resolve('src/components')) } }
35.img 加载失败
场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片
// page 代码 <img :src="imgUrl" @error="handleError" alt=""> <script> export default{ data(){ return{ imgUrl:'' } }, methods:{ handleError(e){ e.target.src=reqiure('图片路径') //当然如果项目配置了transformToRequire,参考上面 27.2 } } } </script>
36.css
36.1 局部样式
1.Vue中style标签的scoped属性表示它的样式只作用于当前模块，是样式私有化.
2.渲染的规则/原理：
给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性