vue输入字数统计功能的原生实现对比

原创 lingwer111 随笔 vue 382阅读 2017-05-26 01:27:59 举报

以前微博有140字数限制,限制虽然取消了,但也有字数统计功能、

vue输入字数统计功能的原生实现对比
用原生方法实现这个功能可以说非常麻烦。从图中看到,微博的这个功能还有bug,输入非汉字,字数统计就不准确了、
html 代码

原生JavaScript实现,一开始用[backcolor=#ebf1dd]e.target.textLength[/bgcolor]属性获取textarea字符串长度,但我猜测是中文输入软件的原因,会给字符串添加制表符导致textLength不准确

vue输入字数统计功能的原生实现对比
所以需要对字体做 [backcolor=#ebf1dd] e.target.value.trim()[/bgcolor]去掉字符串的空白符处理。

今天开始学vue,做个笔记再对比字数统计的vue和原生JavaScript实现做对比
vue有2种实现方法使用[backcolor=#ebf1dd]watch[/bgcolor]监听 和 计算属性[backcolor=#ebf1dd] computed[/bgcolor]

使用watch监听文本框。
watch能够观察和响应数据的变动,随之调用函数内的方法。
html 代码

使用计算属性computed 来实现。
计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 this.area 还没有发生改变,多次访问number计算属性会立即返回之前的计算结果,而不必再次执行函数。
html 代码

可以看到,vue的代码更加简洁优雅,难度也低了很多。
至于watch和计算函数computed那个好。作者在官方文档中给出了答案
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而,通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复