首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue 进阶之路（三）

Posted in Javascript onApril 18, 2019

之前的文章我们已经对 vue 有了初步认识，这篇文章我们通过一个例子说一下 vue 的方法 methods，计算属性 compited 和监听器 watch。

现在我们有一个需求，变量 firstName = "hello"，变量 lastName = "world"，我们需要将这两个变量拼接到在前端展示，最基本的我们可以想到的就是：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{firstName + " " + lastName}}</p>
  <p>{{firstName}} {{lastName}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
    },
  })
</script>
</body>
</html>

以上两种写法很明显是可以这么做的，但是第一种我们在 {{ }} 插值表达式内进行了代码的计算，这是我们不建议使用方式，第二种是写两个 {{ }} 插值表达式，看起来效果不错，但是如果我们要再拼接多个的话在 HTML 代码中就显得冗余了，后期也不好维护。接下来我们看一下如何在方法内实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName()}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    methods:{
      fullName(){
        console.log("计算了一次");
        return this.firstName + " " + this.lastName
      }
    }
  })
</script>
</body>
</html>

上面的代码我们在 methods 里定义了一个 fullName 的方法，然后通过 {{ }} 插值表达式放在 HTML 里，当页面加载的时候直接调用，运行结果如下：

Vue 进阶之路（三）

我们在页面加载的时候同时定义了一个 time 的数据，当我们更新这个 time 数据的时候，结果如下：

Vue 进阶之路（三）

我们发现当我们更新 time 数据的时候，fullName 方法也调用了一次。这显然不是很理想的。

我们再来看一下利用监听器 watch 方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      fullName: 'hello world',
      time: 1
    },
    watch: {
      firstName() {
        console.log("firstName 更改了");
        this.fullName = this.firstName + " " + this.lastName;
      },
      lastName() {
        console.log("lastName 更改了");
        this.fullName = this.firstName + " " + this.lastName;
      }
    }
  })
</script>
</body>
</html>

结果如下：

Vue 进阶之路（三）

我们在 Vue 实例的 watch 属性里定义了两个方法 firstName 和 lastName，watch 属性中方法名和 data 属性里的数据变量名相同，表示会实时监听该数据的变化，如果监听到变化时会实时更新 DOM。

我们先来看一下当跟 methods 方法那样更新 time 数据时的变化：

Vue 进阶之路（三）

我们可以看出当 time 数据更新时并没有调用 firstName 和 lastName 里的数据。当我们更新 firstName 和 lastName 的数据时，结果如下：

Vue 进阶之路（三）

我们可以看出当我们更新 firstName 或者 lastName 的数据时，fullName 数据才会更新，这说明当数据挂载到 DOM 上的时候会缓存起来，如果数据不更新，则还会继续使用缓存的数据，当数据更新时才会调用 watch 里面的方法，这就比 methods 的方法要好很多。

我们再来看一下计算属性 computed：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    computed:{
      fullName(){
        console.log("计算了一次");
        return this.firstName + " " + this.lastName;
      }
    }
  })
</script>
</body>
</html>

运行结果如下：

Vue 进阶之路（三）

我们可以看出跟 watch 比，我们并没有在 data 里定义 fullName 数据，而是在 computed 属性里直接定义 fullName 然后 return 出 firstName 和 lastName 的拼接结果，当页面呈现时，从输出结果可以看出会走一次计算属性，当我们改变 time 数据时：

Vue 进阶之路（三）

可以看出 computed 里的方法没有被调用，当我们改变 firstName 或者 lastName 的数据时，结果如下：

Vue 进阶之路（三）

从上面的结果可以看出 computed 里面的方法被调用了，这是我们想要的结果，当跟 fullName 有关的 firstName 和 lastName 数据改变时计算属性才会重新计算，当跟 fullName 无关的 time 数据变化时会用之前缓存的数据，这正是我们想要的结果。

以上三种方法进行比较我们可以得知 methods 方法是最不理想的，监听器 watch 和 计算属性 computed 两种方法的运行结果是一样的，但是 计算属性 computed 方法更简单一些。所以在 watch 和 computed 两种方法都能实现的时候我们更推荐使用 computed 方法。

但是上面的 watch 和 computed 两个方法里有个问题，就是 watch 里我们在 data 里定义了一个 fullName 的数据，当我们在更改 fullName 的值时 DOM 会跟着改变，这个跟 firstName 和 lastName 数据更改是一样的。但是当我们在 computed 里我们并没有定义 fullName，当我们更改 fullName 的数据时，如下：

Vue 进阶之路（三）

我们发现 DOM 并没有更新，这跟 watch 比起来就显得不友好了，其实在 computed 里有 get 和 set 两个属性，我们 computed 的 fullName 方法改成如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
  <p>{{fullName}} {{time}}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      firstName: 'hello',
      lastName: 'world',
      time: 1
    },
    computed: {
      fullName: {
        get() {
          console.log("计算了一次");
          return this.firstName + " " + this.lastName;
        },
        set(value) {
          console.log(value);
          var result = value.split(" ");
          this.firstName = result[0];
          this.lastName = result[1];
        }

      }
    }
  })
</script>
</body>
</html>

运行结果如下：

Vue 进阶之路（三）

可以看出当我们通过 get 和 set 就可以改变 fullName 的值使 DOM 更新了。当页面更新的时候先触发 fullName 中的 get 方法，并返回 fullName，当我们改变 time 时，fullName 所依赖的 firstName 和 lastName 并没有更改，所以就 fullName 就会去取缓存的值，在 fullName 的 set 方法里可以传一个 value 的参数，通过打印我们可以看出 value 值就是我们直接改变 fullName 的值，我们就可以通过该值来赋值改变 firstName 和 lastName，这样 fullName 所依赖的 firstName 或 lastName 改变时 DOM 就会实时更新了。

以上所述是小编给大家介绍的Vue 进阶之路详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Vue 进阶之路（三）

- Author -

丰寸

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 #Javascript
javascript数据类型中的一些小知识点（推荐）
Apr 18 #Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 #Javascript
11个教程中不常被提及的JavaScript小技巧（推荐）
Apr 17 #Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
详解Vue 全局变量，局部变量
Apr 17 #Javascript
基于vue-cli、elementUI的Vue超简单入门小例子（推荐）
Apr 17 #Javascript
短信验证码(1) dockerfile(1) pytz(1) commit(1) Tablespace(1) GoFrame(3) 分布式锁(3) harbor(1) SQLite3(1) reduce(2)
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
js实现瀑布流效果（自动生成新的内容）
2017/03/16 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
微信小程序上传图片功能（附后端代码）
2020/06/19 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
js实现电灯开关效果
2021/01/19 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
英国和爱尔兰的自炊式豪华度假小屋：Rural Retreats
2018/06/08 全球购物
婚礼证婚人证婚词
2014/01/13 职场文书
青年文明号事迹材料
2014/01/18 职场文书
社会学专业求职信
2014/02/24 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
项目合作意向书
2015/05/08 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python