AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue学习第四章

2024-11-22 127
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉

🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

1. 计算属性的基本使用

​ 现在有变量姓氏和名字，要得到完整的名字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性的基本使用</title>
</head>
<body>
  <div id="app">
    <!-- Mastache语法 -->
    <h2>{
  {firstName+ " " + lastName}}</h2>
    <!-- 方法 -->
    <h2>{
  {getFullName()}}</h2>
    <!-- 计算属性 -->
    <h2>{
  {fullName}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    
      el:"#app",
      data:{
    
        firstName:"skt t1",
        lastName:"faker"
      },
      computed: {
    
        fullName:function(){
    
          return this.firstName + " " + this.lastName
        }
      },
      methods: {
    
        getFullName(){
    
          return this.firstName + " " + this.lastName
        }
      },
    })
  </script>
</body>
</html>
  1. 使用Mastache语法拼接<h2>{ {firstName+ " " + lastName}}</h2>
  2. 使用方法methods<h2>{ {getFullName()}}</h2>
  3. 使用计算属性computed<h2>{ {fullName}}</h2>

例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用()，而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。

2. 计算属性的复杂使用

​ 现在有一个数组数据books，里面包含许多book对象，数据结构如下：

books:[
          {
   id:110,name:"JavaScript从入门到入土",price:119}, 
          {
   id:111,name:"Java从入门到放弃",price:80},
          {
   id:112,name:"编码艺术",price:99},
          {
   id:113,name:"代码大全",price:150},
        ]

​ 要求计算出所有book的总价格totalPrice。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性的复杂使用</title>
</head>
<body>
  <div id="app">


    <h2>总价格：{
  {totalPrice}}</h2>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    
      el:"#app",
      data:{
    
        books:[
          {
    id:110,name:"JavaScript从入门到入土",price:119},
          {
    id:111,name:"Java从入门到放弃",price:80},
          {
    id:112,name:"编码艺术",price:99},
          {
    id:113,name:"代码大全",price:150},
        ]
      },
      computed: {
    
        totalPrice(){
    
          let result= 0;
          for (let i = 0; i < this.books.length; i++) {
    
            result += this.books[i].price;
          }
          return result
        }
      }
    })
  </script>
</body>
</html>

​ 获取每一个book对象的price累加，当其中一个book的价格发生改变时候，总价会随之变化。

3. 计算属性的setter和getter

​ 在计算属性中其实是由这样两个方法setter和getter。

      computed: {
   
        fullName:{
   
          //计算属性一般没有set方法，只读属性
          set:function(newValue){
   
            console.log("-----")
            const names = newValue.split(" ")
            this.firstName = names[0]
            this.lastName = names[1]
          },
          get:function(){
   
            return this.firstName + " " + this.lastName
          }
        }
      }

​ 但是计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。

computed的getter/setter

请看如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue计算属性的getter和setter</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>计算属性：computed的getter/setter</h1>
            <h2>fullName</h2>
            {
  {fullName}}
            <h2>firstName</h2>
            {
  {firstName}}
            <h2>lastName</h2>
            {
  {lastName}}
        </div>
        <script>
            var app = new Vue({
    
                el:"#app",
                data:{
    
                firstName:"zhang",
                lastName:"san",
                },
                computed: {
    
                    fullName:{
    
                        get:function(){
    
                            return this.firstName+" "+this.lastName
                        },
                        set:function(value){
    
                            var list = value.split(' ');
                            this.firstName=list[0]
                            this.lastName=list[1]
                        }
                    }
                },
            });
        </script>
    </body>
    </html>

初始化

修改fullName

结论

- 通过这种方式，我们可以在改变计算属性值的同时也改变和计算属性相关联的属性值。

4. 计算属性和methods的对比

​ 直接看代码，分别使用计算属性和方法获得fullName的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性和methods的对比</title>
</head>
<body>
  <div id="app">
    <!-- methods，即使firstName和lastName没有改变，也需要再次执行 -->
    <h2>{
  {getFullName()}}</h2>
    <h2>{
  {getFullName()}}</h2>
    <h2>{
  {getFullName()}}</h2>
    <h2>{
  {getFullName()}}</h2>
    <!-- 计算属性有缓存，只有关联属性改变才会再次计算 -->
    <h2>{
  {fullName}}</h2>
    <h2>{
  {fullName}}</h2>
    <h2>{
  {fullName}}</h2>
    <h2>{
  {fullName}}</h2>


  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
    
      el:"#app",
      data:{
    
        firstName:"skt t1",
        lastName:"faker"
      },
      computed: {
    
        fullName(){
    
          console.log("调用了计算属性fullName");

          return this.firstName + " " + this.lastName
        }
      },
      methods: {
    
        getFullName(){
    
          console.log("调用了getFullName");

          return this.firstName + " " + this.lastName
        }
      },
    })
  </script>
</body>
</html>

​ 分别使用方法和计算属性获取四次fullName，结果如图。

​ 由此可见计算属性有缓存，在this.firstName + " " + this.lastName的属性不变的情况下，methods调用了四次，而计算属性才调用了一次，性能上计算属性明显比methods好。而且在改动firstName的情况下，计算属性只调用一次，methods依然要调用4次。

5. Vue计算属性与侦听器总结

照例看一段代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue计算属性/侦听器/方法比较</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>计算属性：computed</h1>
            {
  {fullName}}
            <h1>方法：methods</h1>
            {
  {fullName2()}}
            <h1>侦听器：watch</h1>
            {
  {watchFullName}}
            <h1>年龄</h1>
            {
  {age}}
        </div>
        <script>
            var other = 'This is other';
            var app = new Vue({
    
                el:"#app",
                data:{
    
                firstName:"zhang",
                lastName:"san",
                watchFullName:"zhangsan",
                age:18,
                },
                watch: {
    
                    firstName:function(newFirstName, oldFirstName){
    
                        console.log("firstName触发了watch,newFirstName="+newFirstName+",oldFirstName="+oldFirstName)
                        this.watchFullName = this.firstName+this.lastName+","+other
                    },
                    lastName:function(newLastName, oldLastName){
    
                        console.log("lastName触发了watch,newLastName="+newLastName+",oldLastName="+oldLastName)
                        this.watchFullName = this.firstName+this.lastName+","+other
                    }  
                },
                computed: {
    
                    fullName:function(){
    
                    console.log("调用了fullName,计算了一次属性")
                    return this.firstName+this.lastName+","+other;
                    }
                },
                methods: {
    
                    fullName2:function(){
    
                        console.log("调用了fullName,执行了一次方法")
                        fullName2 = this.firstName+this.lastName+","+other;
                        return fullName2;
                    }
                }
            });
        </script>
    </body>
    </html>

初始化：

修改firstName/lastName/两者都修改

修改computed中没计算的age

修改Vue实例外的对象

修改Vue实例外对象后在修改Vue实例内的对象

测试结论：

  1. 使用computed计算了fullName属性，值为firstName+lastName。计算属性具有缓存功能，当firstName和lastName都不改变的时候，fullName不会重新计算，比如我们改变age的值，fullName的值是不需要重新计算的。
  2. methods并没有缓存特性，比如我们改变age的值，fullName2()方法会被执行一遍。
  3. 当一个功能可以用上面三个方法来实现的时候，明显使用computed更合适，代码简单也有缓存特性。
  4. 计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。

计算属性：computed

计算属性范围在Vue实例的fullName内所管理的firstName和lastName,通常监听多个变量

侦听器：watch

监听数据变化，一般只监听一个变量或数组

使用场景

watch(异步场景)，computed(数据联动)

Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉

文章标签：
CDN
JavaScript
前端开发
缓存
关键词：
学习VUE.js
vue学习VUE.js
雨溪-yuxi
目录
相关文章
34789737
|
27天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
173 2
谢妹纸
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
626 0
我们是幸福一家人
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
289 82
34789737
|
3月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
135 0
rvblio6ca4cug
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
285 1
34789737
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
398 17
34789737
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
224 1
蓝易云
|
4月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析，你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一，无论是构建简单的静态网站还是复杂的单页面应用，你都会经常用到。记住，尽管Vue提供了大量预定义的指令，你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器，让编码变得更轻松、更愉快吧！
蓝易云
78 1
34789737
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
360 0
34789737
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
149 0

热门文章

最新文章

  • 1
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
  • 2
    Vue中如何实现兄弟组件之间的通信
  • 3
    vue3使用ts传参教程
  • 4
    解决VsCode启动Vue项目报错：‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
  • 5
    vue3+ts+vite读取静态资源图片和环境变量
  • 6
    vue项目axios的使用实例详解
  • 7
    vue element plus Select 选择器
  • 8
    项目性能优化之用compression-webpack-plugin插件开启gzip压缩，以vue为例
  • 9
    Vue中如何获取当前路由的参数？
  • 10
    Vue3中el-table表格数据不显示
  • 1
    Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
    626
  • 2
    用组件懒加载优化Vue应用性能
    289
  • 3
    Vue 表情包输入组件实现代码及详细开发流程解析
    224
  • 4
    Vue 自定义进度条组件封装及使用方法详解
    398
  • 5
    如何高效实现 vue 文件批量下载及相关操作技巧
    360
  • 6
    Vue 项目中如何自定义实用的进度条组件
    149
  • 7
    Vue框架中常见指令的应用概述。
    78
  • 8
    Vue 文件批量下载组件封装完整使用方法及优化方案解析
    357
  • 9
    Vue 表情包输入组件的实现代码：支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
    352
  • 10
    Vue 手风琴实现的三种常用方式及长尾关键词解析
    189

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云无影云电脑免费使用_免费申请教程