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 进阶之路详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
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
You might like
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
linux环境下Django的安装配置详解
2019/07/22 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
小学生开学第一课活动方案
2014/03/27 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
老公保证书
2015/01/17 职场文书
维稳承诺书
2015/01/20 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Redis特殊数据类型bitmap位图
2022/06/01 Redis