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 相关文章推荐
JavaScript 数组运用实现代码
Apr 13 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
js格式化时间小结
Nov 03 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
vue解决跨域问题(推荐)
Nov 10 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
在项目中寻找代码的坏命名
2012/07/14 PHP
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
wxPython实现列表增删改查功能
2019/11/19 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
劳资专员岗位职责
2013/12/27 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
晚会邀请函范文
2014/01/24 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
退伍军人感言
2015/08/01 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android