Vue中使用方法、计算属性或观察者的方法实例详解


Posted in Javascript onOctober 31, 2018

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子。

<div id="app">
 <input v-model="firstName" type="text">
 <input v-model="secondName" type="text">
 <p>{{fullName}}</p>
</div>

methods 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "Mo",
 secondName: "deng",
 fullName: ""
 },
 methods: {
 getFullName () {
  this.fullName = this.firstName + "" + this.secondName;
 }
 },
 mounted () {
 this.getFullName();
 }
});

computed 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "liu",
 secondName: "deng"
 },
 computed: {
 fullName () {
  return this.firstName + "" + this.secondName;
 }
 }
});

watcher 方式

var vm = new Vue({
 el: "#app",
 data: {
 firstName: "liu",
 secondName: "deng",
 fullName: "liudeng"
 },
 watch: {
 firstName: function (value) {
  this.fullName = value+ "" + this.secondName
 },
 secondName: function (value) {
  this.fullName = this.firstName + "" + value
 }
 }
});

我们看到上面三种方法实现一个相同的效果,虽然效果相同,但是我们每个方法之间会有所区别。

methods 方法

在我们使用 Vue 时可能会有很多方法会被放到这里,比如它可能是我们的事件处理方法,一些操作方法的逻辑等等,但是它不能跟踪任何依赖,而且还会在每次组件重新加载时都会执行,这就会导致我们的方法会执行很多次,如果我们的 UI 操作频繁的话,会导致性能的问题,所以在一些开销比较大的计算时,我们应该尝试其他方案进行优化处理。

computed 计算属性

从名字我们其实大概的可以看出,它是一个依赖于其他属性的,当依赖的属性发生变化的时候就会触发我们计算属性的逻辑,而且是基于它们依赖的属性进行缓存的,也就是说只有当依赖的属性发生变化的时候才会从新求值。

相比 methods 的优势在于不必每次从新执行定义的函数,这给我们的性能上有着很大的优势,对我们已经存在的数据属性非常好的处理方式,例如我们案例中 fullName 的计算,优势非常明显。

watcher 观察者

当一些数据属性变化时,我们执行一些逻辑时观察者对我们非常重要,它可以帮助我们监听属性的变化,只要属性发生变化,我们就可以执行对应的一些操作。

如何实现一个 TodoList

查看在线 TodoList

在 methods 中我们放置了一些事件处理方法,我们可以在事件绑定中直接应用,不会依赖于任何的属性。

<button class="todo-remove" type="button" @click="removeTodoItem(item)">x</button>
export default {
 name: "TodoList",
 data() {
 return {
  todoType: "all", //任务类型
  allTodoItems: [],
 };
 },
 methods: {
 //... 省略

 //添加任务
 addItem() {
  this.allTodoItems.push({
  id: this.allTodoItems.length,
  text: this.itemText,
  completed: false
  });
  this.itemText = "";
 },
 //删除任务
 removeTodoItem(item) {
  this.allTodoItems = this.allTodoItems.filter(
  value => value.id != item.id
  );
 }
 }
};

我们可以看到计算属性都是依赖于其他属性的,只有当依赖的属性值发生改变时,我们的计算属性才会发生变化。

例如:passTodoItems 计算属性依赖于 todoType 属性,只要 todoType 属性发生变化,我们的 passTodoItems 也会发生变化,从而筛选出我们需要的数据。

export default {
 name: "TodoList",
 data() {
 return {
  todoType: "all", //任务类型
  allTodoItems: [],
 };
 },
 computed: {
 //展示的任务
 passTodoItems() {
  return this[this.todoType](this.allTodoItems);
 },
 //是否显示底部的选项
 isShowOptions() {
  return this.allTodoItems.length;
 }
 }
}

可以看到我们利用 watcher 进行数据的存储逻辑操作,只要当我们监听的属性 allTodoItems 发生变化时,我们就把数据进行保存。

export default {
 name: "TodoList",
 data() {
 return {
  todoType: "all", //任务类型
  allTodoItems: [],
 };
 },
 watch: {
 allTodoItems: {
  handler() {
  localStorage.setItem("todoItems", JSON.stringify(this.allTodoItems));
  },
  deep: true //深度监听对象属性的变化,如果没有检测不到对象属性的变化
 }
 }
}

总结

通过一个简单的 TodoList 案例展示了 methods、computed、watcher 三者的用法,当然我们的实战项目中不仅仅是这么简单。

我们再使用 methods、computed、watcher 时,应该选择它们合适的使用场景,虽然它们可以实现相同的结果。

methods 一般定义一些事件处理方法,操作方法,因为会频繁的触发,所以会引起性能问题,一般不会用在操作频繁的地方。

computed 会依赖于其他已经存在的属性,而且会进行缓存,只有在依赖的属性发生变化时,计算属性才会发生改变,开销大的地方使用较多。

watcher 它提供了一个更通用的方法来监听我们的属性,当我们的属性变化是执行一些逻辑的操作。

以上所述是小编给大家介绍的Vue中使用方法、计算属性或观察者的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Vue项目History模式404问题解决方法
Oct 31 #Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
vue通过style或者class改变样式的实例代码
Oct 30 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
简单的php文件上传(实例)
2013/10/27 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python插入排序算法实例分析
2015/07/03 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
优秀党员转正的自我评价
2013/10/06 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
单位工资证明范本
2015/06/12 职场文书
如何撰写促销方案?
2019/07/05 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Pandas自定义选项option设置
2021/07/25 Python
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
Redis实现短信验证码登录的示例代码
2022/06/14 Redis