/

Vue 使用笔记

记录开发过程中使用 Vue 时遇到的一些问题和解决办法。

watch 对象的属性

data: {
a: 100,
msg: {
channel: "音乐",
style: "活泼"
}
},
watch: {
a(newval, oldVal) {
console.log("new: %s, old: %s", newval, oldVal);
}
}
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
// 深度监听
deep: true
}
}

监听对象内的某一具体属性,可以通过 computed 做中间层来实现:

computed: {
channel() {
return this.msg.channel
}
},
watch:{
channel(newValue, oldValue) {
console.log('new: %s, old: %s', newval, oldVal)
}
}

判断 data 中的对象是否为空

1、利用 jQueryisEmptyObject

$.isEmptyObject(data.list);

实现源码:

isEmptyObject: function(obj) {
var name;
for (name in obj) {
return false;
}
return true;
}

2、获取到对象中的属性名,存到一个数组中,通过判断数组的 length 来判断此对象是否为空:

var arr = Object.getOwnPropertyNames(data);
alert(arr.length == 0); // true

ES6:

var arr = Object.keys(data.list);
alert(arr.length == 0); // true

3、转化为 json 字符串,再判断该字符串是否为 {}

var b = JSON.stringify(data) == "{}";
alert(b); // true

关闭 webpack-dev-server 自动刷新

文件保存后页面刷新,刷的眼晕。

devServer: {
...
hot: false,
inline: false,
}

注释掉 plugins 中的相关插件。

plugins: [
// new webpack.HotModuleReplacementPlugin()
],

必须有 webpack.HotModuleReplacementPlugin 才能完全启用 HMR。如果 webpack 或 webpack-dev-server 是通过 –hot 选项启动的,那么这个插件会被自动添加,所以你可能不需要把它添加到 webpack.config.js 中。

nextTick

在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM 结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环 “tick” 中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

键盘监听事件

按键修饰符 | vue

<input type="text" @keyup.esc="KeyUpEsc" />

将原生事件绑定到组件 | vue

使用 element 组件库的 el-input 标签,绑定 delete 键:

<el-input
v-model="input"
placeholder="请输入内容"
@keyup.delete.native="KeyUpDelete"
></el-input>

为什么这次绑定事件多一个 .native 修饰符,这个可能是因为 element-ui 封装了个 div 在 input 标签外面,把原来的事件隐藏了,所以如果不加 .native 的话,按键不会生效。

上面两种实现效果是当 input 标签获取到 _焦点_ 的时候,才能监听到键盘,下面这种是全局监听 enter 键,是把监听事件绑定到 document 上(登录页面常用):

created: function() {
var _this = this;
document.onkeydown = function(e) {
let key = window.event.keyCode;
if (key == 13) {
_this.submit();
}
};
},

.sync 修饰符

.sync 修饰符 | vue

<history-dialog
:historys="historyTable"
:dialogVisible.sync="dialogHistoryTableVisible"
/>
methods: {
onClose() {
this.$emit("update:dialogVisible", false);
},
},

优化图片加载失败

<div>
<img :src="item.picture" @error.once="handleImgError($event)" />
</div>
handleImgError (e) {
e.currentTarget.src = "http://www.ianbiangou.cn/index/ICON2.png"
}

References