扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >什么是Vue 进阶
  • 109

0
分享到

什么是Vue 进阶

2024-04-02 19:04:59 109人浏览 八月长安
摘要

这期内容当中小编将会给大家带来有关什么是Vue 进阶，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。现在我们有一个需求，变量 firstName = "hello

这期内容当中小编将会给大家带来有关什么是Vue 进阶，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

现在我们有一个需求，变量 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 进阶了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网html频道。

--结束END--

本文标题: 什么是Vue 进阶

本文链接: https://lsjlt.com/news/80660.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 什么是Vue 进阶
    这期内容当中小编将会给大家带来有关什么是Vue 进阶，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。现在我们有一个需求，变量 firstName = "hello...
    99+
    2024-04-02
  • Vue 3.0进阶之什么是响应式Refs API
    这期内容当中小编将会给大家带来有关Vue 3.0进阶之什么是响应式Refs API，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一、ref该函数接受一个内部值并返回一个响...
    99+
    2024-04-02
  • vue高阶组件是什么
    本教程操作环境：windows7系统、vue3版，DELL G3电脑。高阶组件介绍vue 高阶组件的认识，在React中组件是以复用代码实现的，而Vue中是以mixins 实现，并且官方文档中也缺少一些高阶组件的概念,因为在vue中实现高阶...
    99+
    2023-05-14
    vue高阶组件
  • vue中rc阶段指的是什么
    这篇“vue中rc阶段指的是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中rc阶段指的是什么”文章吧。vue的r...
    99+
    2023-06-29
  • Linux Deepin12.12进阶设置方法是什么
    这篇文章主要讲解了“Linux Deepin12.12进阶设置方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Linux Deepin12.12进阶设置方法是什么”吧！1、启用 Do...
    99+
    2023-06-16
  • Kafka演进的四个阶段分别是什么
    这篇文章将为大家详细讲解有关Kafka演进的四个阶段分别是什么，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。　　Kafka是当下热门的消息队列中间件，它可以...
    99+
    2024-04-02
  • 详解Vue进阶构造属性
    目录1、Directive 自定义指令2、Mixin 混入3、Extends 继承4、provide 和 inject1、Directive 自定义指令 在 Vue 框架下的代码中，...
    99+
    2024-04-02
  • Vue Jest进阶攻略：掌握高阶测试技巧
    测试驱动开发 (TDD) 的优点 在开始学习Vue Jest进阶攻略之前，我们先来了解一下TDD的优点。TDD是一种软件开发方法，强调在编写生产代码之前先编写测试用例，然后根据测试用例来编写代码。这种方法可以帮助我们提高代码质量，减少B...
    99+
    2024-02-04
    Vue.js Jest 单元测试 组件测试 高阶测试技巧
  • vue渐进式的含义是什么
    本篇内容主要讲解“vue渐进式的含义是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue渐进式的含义是什么”吧!在vue中，渐进式体现在vue主张少，不强势，没有多做职责之外的事；vue可...
    99+
    2023-06-29
  • Vue组件生命周期的三个阶段是什么
    这篇文章主要介绍“Vue组件生命周期的三个阶段是什么”，在日常操作中，相信很多人在Vue组件生命周期的三个阶段是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue组件生命周期的三个阶段是什么”的疑惑有所...
    99+
    2023-07-04
  • Vue 3.0进阶之如何使用VNode
    这篇文章主要讲解了“Vue 3.0进阶之如何使用VNode”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue 3.0进阶之如何使用VNode”吧！一、VN...
    99+
    2024-04-02
  • 什么是Python高阶函数
    这篇文章主要介绍“什么是Python高阶函数”，在日常操作中，相信很多人在什么是Python高阶函数问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”什么是Python高阶函数”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-06-15
  • 什么是python 高阶函数
    本篇文章为大家展示了什么是python 高阶函数，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。体验高阶函数在Python中，abs()函数可以完成对数字求绝对值计算。abs(-10) #&...
    99+
    2023-06-06
  • Python高阶函数是什么
    Python高阶函数是指可以接受函数作为参数或者返回一个函数的函数。在Python中，函数可以作为一种数据类型传递给其他函数，这样的...
    99+
    2024-03-08
    python
  • ETL工具sed进阶是怎么样的
    ETL工具sed进阶是怎么样的，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。sed 详解我觉得 sed 玩到最后，应该触及的最高难度的问题，有这些：替换百万行文...
    99+
    2023-06-06
  • Vue进阶构造属性的示例分析
    小编给大家分享一下Vue进阶构造属性的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1、Directive 自定义指令在 Vue 框架下的代码中，很少用到...
    99+
    2023-06-15
  • VUE Nuxt.js过渡大全：从入门到进阶
    ...
    99+
    2024-04-02
  • MYSQL进阶怎么学
    这篇文章主要介绍MYSQL进阶怎么学，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！文章目录1 影响性能的几个方面1.1 硬件方面1.2 服务器系统1.3 数据库存储引擎的选择1.4 ...
    99+
    2024-04-02
  • vue中什么是路由懒加载？为什么要进行？
    vue中什么是路由懒加载？为什么要进行路由懒加载路由？下面本篇文章带大家了解一下vue中的路由懒加载，希望对大家有所帮助！路由懒加载懒加载本质是延迟加载或按需加载，即在需要的时候的时候进行加载。 首页不用设置懒加载，一个页面加载过后再次访问...
    99+
    2023-05-14
    路由懒加载 Vue
  • js中什么是高阶函数
    这篇文章主要介绍了js中什么是高阶函数，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。什么是高阶函数？高阶函数只是将函数作为参数或返回值的函数...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作