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

Vue（五）计算属性、过滤器、axios、vue 生命周期

2022-04-12 160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue（五）计算属性、过滤器、axios、vue 生命周期

一、计算属性

       自己不保存属性值，而是根据其他属性的属性值，动态计算出自己的属性值。如果页面上需要一个值，但是这个值不是直接给的，需要经过复杂的计算过程才能获得时，都用计算属性。


1. 使用方法

（1）定义计算属性

new Vue({
    el:"#app",
    data:{ ... },
    methods:{ ... },
    watch:{ ... },
    computed:{
      计算属性名(){
        复杂的计算过程
        return 属性值
      }
    }
  })

（2）在页面上使用计算属性


<元素>{{计算属性名}}</元素>
//注意：
//计算属性虽然称为属性，但其本质是一个函数
//虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()

2. 计算属性原理

（1）当 new Vue() 扫描到一个不带 () 的变量时，会先去 data 中查找普通的属性。如果没找到，就去计算属性 computed 中查找。


（2）如果找到计算属性，就自动调用计算属性的函数，执行出计算结果，并将计算结果替换到页面中属性名位置显示。


（3）并且，vue 会自动将首次计算属性计算出的结果，缓存起来，反复使用！避免重复计算！


（4）当多次使用同一计算属性时，不会重复执行计算属性的计算过程，而是直接从缓存中取值。


（5）当计算属性内部以来的其它变量值发生了变化时，vue 会自动重新计算属性的值，并重新缓存起来反复使用。


计算属性 computed 和普通函数 methods 差别：


       methods 中的普通函数，如果反复调用几次，就会反复执行几次，不会缓存结果；computed 中的计算属性，即使反复使用多次，也只计算一次，然后将结果缓存起来反复使用。如果更倾向于计算出一个值显示到页面上时，首选 computed 计算属性；如果更倾向于执行一个操作，而不关系结果时，首选 methods 普通函数。


举例：使用计算属性计算购物车总价；


<body>
  <div id="app">
    <ul>
      <li v-for="(p,i) of cart" :key="i">
        {{p.pid}} | {{p.pname}} | ¥{{p.price.toFixed(2)}} | {{p.count}} | 小计:¥{{(p.price*p.count).toFixed(2)}}
      </li>
    </ul>
    <h3>总价:¥{{total.toFixed(2)}}</h3>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        cart: [{
            pid: 1,
            pname: "华为",
            price: 5588,
            count: 2
          },
          {
            pid: 2,
            pname: "苹果",
            price: 9588,
            count: 1
          },
          {
            pid: 3,
            pname: "小米",
            price: 3588,
            count: 3
          }
        ]
      },
      methods: {},
      computed: {
        total() {
          console.log(`自动调用了一次total()`);
          var result = 0;
          for (var p of this.cart) {
            result += p.price * p.count;
          }
          return result;
        }
      }
    })
  </script>
</body>

效果如下：

image.png



二、过滤器

       过滤器是专门对变量的原始值先加工再显示的一种特殊函数。


1. 使用方法

（1）创建过滤器函数


Vue.filter("过滤器名",function(旧值){
   return 新值
  })

（2）在页面中使用过滤器函数


<元素>{{变量名|过滤器名}}</元素>
//注意
//过滤器名用在{{}}内，所以如果过滤器名中包含多个单词应用驼峰命名

举例：使用过滤器过滤性别；

<body>
  <div id="app">
    <!--不想显示1和0，显示男和女-->
    <h3>性别: {{sex|sexFilter}}</h3>
  </div>
  <script>
    Vue.filter("sexFilter", function (oldVal) {
      return oldVal == 1 ? "男" : "女";
    })
    new Vue({
      el: "#app",
      data: {
        sex: 0
      }
    })
  </script>
</body>

效果如下：

image.png


2. 过滤器传参

//定义
Vue.filter("过滤器名",function(旧值, 自定义形参, ...){
    return 新值
  })
//使用 
<元素>{{变量名 | 过滤器名(实参值1, ...)}}</元素>

举例：使用过滤器显示不同的性别，可以选择不同的语言；

<body>
  <div id="app">
    <!--默认显示中文的男或女-->
    <h3>性别: {{sex|sexFilter("cn")}}</h3>
    <!--通过参数改为显示英文的男或女-->
    <h3>性别: {{sex|sexFilter("en")}}</h3>
    <!--通过参数改为显示中文的男或女-->
    <h3>性别: {{sex|sexFilter("cn")}}</h3>
  </div>
  <script>
    Vue.filter(
      "sexFilter",
      function (sex, language) {
        if (language == "en") {
          return sex == 1 ? "Male" : "FeMale"
        } else {
          return sex == 1 ? "男" : "女"
        }
      }
    )
    new Vue({
      el: "#app",
      data: {
        sex: 1
      }
    })
  </script>
</body>

效果如下：

image.png



3. 过滤器连用

//定义 
//充分考虑将来进入这个过滤器的旧值共有几种情况
Vue.filter("过滤器名",function(旧值,..){  })
//使用
<元素>{{变量 | 过滤器1 | 过滤器2 | ... }}</元素>

举例：给性别追加图标；


<body>
  <div id="app">
    <!--只显示图标-->
    <h3>性别: {{sex|sexIcon}}</h3>
    <!--默认显示中文+图标-->
    <h3>性别: {{sex|sexFilter|sexIcon}}</h3>
    <!--通过参数改为英文+图标-->
    <h3>性别: {{sex|sexFilter("en")|sexIcon}}</h3>
    <!--通过参数改为中文+图标-->
    <h3>性别: {{sex|sexFilter("cn")|sexIcon}}</h3>
  </div>
  <script>
    //过滤器sexIcon 控制图标
    Vue.filter("sexIcon", function (sex) {
      if (sex == 0) {
        return "♀"
      } else if (sex == 1) {
        return "♂"
      } else if (sex == "女" || sex == "male") {
        return sex + "♀"
      } else if (sex == "男" || sex == "Female") {
        return sex + "♂"
      }
    })
    //过滤器sexFilter 控制文字
    Vue.filter(
      "sexFilter",
      function (sex, language) {
        if (language == "en") {
          return sex == 1 ? "Male" : "Female"
        } else {
          return sex == 1 ? "男" : "女"
        }
      }
    )
    new Vue({
      el: "#app",
      data: {
        sex: 0
      }
    })
  </script>
</body>

效果如下：

image.png



三、axios

       axios 是第三方开发的，专门发送 ajax 请求，基于 Promise 的函数库；只要在 vue 中发送 ajax 请求，一律用 axios。


axios的使用：


（1）配置服务器端接口地址的公共路径部分


axios.defaults.baseURL="http://服务器端基础地址部分"


（2）get 请求


axios.get("服务器端接口地址剩余相对路径部分",{
    params:{ 参数名: 参数值, ... : ... , ...  } 
  }).then(result=>{ 
})
//注意：
//.then后必须用箭头函数
//result不直接是响应结果，result.data才是真正的响应结果

（3）post 请求


axios.post(
  "服务器端接口地址剩余相对路径部分",
    "参数名1=参数值1&参数名2=参数值2&..."
  ).then(result=>{
    console.log(result.data);
})

（4）运行时 axios 会自动将 baseURL和 get/post 中的相对路径拼接成接口的完整地址再发送请求。


举例：模拟访问器服务器相关数据；


<body>
  <script>
    //为所有请求配置公共基础路径
    axios.defaults.baseURL = "http://xzserver.com";
    //1. 请求首页商品对象
    axios.get("/index").then(result => {
      console.log(result.data);
    })
    //2. 查询5号商品的详细信息
    axios.get("/details", {
      params: {
        lid: 5
      }
    }).then(result => {
      console.log(result.data);
    })
    //3. 登录验证
    //（正确的用户名:dingding, 正确的密码:123456）
    axios.post("/users/signin", "uname=dingding&upwd=654321").then(result => {
      console.log(result.data);
    })
  </script>
</body>

请求结果如下：

image.png



       需要特别注意： axios发送get请求和发送post请求的参数格式是不一样的。




四、vue的生命周期（高频笔试面试）

       new Vue() 的加载过程是异步的，放在 new Vue() 之后的代码是无法保证在 vue 加载完之后才执行的，所以将来程序的主要流程和代码，都要写在 new Vue() 内部；


       其实 new Vue() 和普通网页一样，在整个加载过程中也要经历多个阶段——生命周期。


1. vue生命周期四个阶段

必经阶段


（1）创建(create)阶段：创建data对象、访问器属性；


（2）挂载(mount)阶段：扫描真实DOM树，创建虚拟DOM树，并首次加载数据到页面显示；


不必经阶段


（3）更新(update)阶段：只当修改 data 中的变量，且影响页面显示时触发；


（4）销毁(destroy)阶段：只当主动调用 vm.$destroy() 函数后触发，只删除虚拟 DOM 树断开的 new Vue() 与页面之间的联系，但是 new Vue() 对象还在内存中。


提示：主动调用 vm.$destroy() 函数销毁后，可用 vm.$mount("#app") 将断开的 new Vue() 和页面重新建立虚拟 DOM 树，重新绑定起来挂载界面。


2. 生命周期钩子函数（回调函数）

       每个阶段前后，各有一对生命周期钩子函数，也就是回调函数。


new Vue({中
/*必经阶段*/
    beforeCreate(){...} //没data、访问器属性，没虚拟DOM树
  //创建(create)阶段
    created(){...} //有data、访问器属性，没虚拟DOM树
    beforeMount(){...} //有data、访问器属性，有虚拟DOM树，但页面内容未加载
  //挂载(mount)阶段
    mounted(){ ...} //有data、访问器属性和虚拟DOM树，页面内容也加载完成，new Vue()首屏加载完成
/*不必经阶段*/
    beforeUpdate(){...}
  //更新(update)阶段
    updated(){...}
    beforeDestroy(){...}
  //销毁(destroy)阶段
    destroyed(){...}

举例：触发 new Vue() 声明周期各个阶段；

<body>
  <div id="app">
    <h3>Welcome {{uname}}</h3>
    <!--显示学子商城首页6个商品的列表-->
    <ul>
      <li>
        编号 | 详细信息 | 单价
      </li>
      <li v-for="(p,i) of arr" :key="i">
        {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        arr: []
      },
      /*必经阶段*/
      beforeCreate() {
        console.log(`创建阶段前自动触发...`)
      },
      created() { //模型对象创建后
        console.log(`创建阶段后自动触发...`)
      },
      beforeMount() {
        console.log(`挂载阶段前自动触发...`)
      },
      mounted() {
        console.log(`挂载阶段后自动触发...`)
      },
      /*不是必经阶段*/
      beforeUpdate() {
        console.log(`更新前自动触发...`)
      },
      updated() {
        console.log(`更新后自动触发...`)
      },
      beforeDestroy() {
        console.log(`销毁前自动触发...`)
      },
      destroyed() {
        console.log(`销毁后自动触发...`)
      }
    });
    //控制台中手写
    //触发更新阶段: 
    //vm.uname="丁丁"
    //触发销毁阶段:
    //vm.$destroy() //该函数只删除DOM树，解除new Vue()对象与界面之间的数据联系
    //销毁后重新绑定
    //vm.$mount("#app")
  </script>
</body>

 效果如下：

  image.png

image.png

image.png

image.png

image.png


3. 发送 ajax 请求应写在哪个阶段

       首屏数据加载完，new Vue() 会自动触发 mounted() 回调函数/钩子函数，所以如果希望在首屏加载完之后，自动发送 ajax 请求，应该放在 mounted() 中。


过程如下：


a. 在  data中先定义变量，准备接受 ajax 请求回来的数据；

b. 在 mounted() 中发送 ajax 请求，获得响应结果；

       先输出响应结果，确定是否正确

       再将响应结果赋值给 data 中之前准备好的变量

c. 在界面中用绑定语法或指令，显示 data 中变量的值。


举例：请求商城首页商品，加载到页面；

<body>
  <div id="app">
    <h3>Welcome {{uname}}</h3>
    <!--显示商城首页6个商品的列表-->
    <input type="text" id="txt">
    <ul>
      <li>
        编号 | 详细信息 | 单价
      </li>
      <li v-for="(p,i) of arr" :key="i">
        {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        arr: []
      },
      /*必经阶段*/
      beforeCreate() {
        console.log(`创建阶段前自动触发...`)
      },
      created() { //模型对象创建后
        console.log(`创建阶段后自动触发...`)
      },
      beforeMount() {
        console.log(`挂载阶段前自动触发...`);
      },
      mounted() {
        console.log(`挂载阶段后自动触发...`);
        axios.get("http://xzserver.applinzi.com/index")
          .then(result => {
            console.log(result.data);
            this.arr = result.data;
          })
      },
      /*不是必经阶段*/
      beforeUpdate() {
        console.log(`更新前自动触发...`)
      },
      updated() {
        console.log(`更新后自动触发...`)
      },
      beforeDestroy() {
        console.log(`销毁前自动触发...`)
      },
      destroyed() {
        console.log(`销毁后自动触发...`)
      }
    });
    //控制台中手写
    //触发更新阶段: 
    //vm.uname="丁丁"
    //触发销毁阶段:
    //vm.$destroy() //该函数只删除DOM树，解除new Vue()对象与界面之间的数据联系
    //销毁后重新绑定
    //vm.$mount("#app")
  </script>
</body>


效果如下：

image.png



补充：$nextTick()

       放在 created 或 vue 外部的 DOM 操作，有可能被 new Vue() 覆盖掉，如果希望写在任何位置的自定义 DOM 操作，都不会被 vue 覆盖，就可用 $nextTick()；


       专门在 vue 所有生命周期执行完之后才触发的一个回调函数。格式如下：


this.$nextTick(
  ()=>{ 
    希望在所有生命周期结束后才自动执行的操作 
  }
)

举例：自动获得文本框焦点；


       在以上例子基础上，可以在 mounted 挂载阶段写入以下代码，可正常获得。

image.png



       如果要求在 mounted 以外的 DOM 操作，也不会被 vue，则就用到了 $nextTick()；

image.png

效果如下：

image.png


文章标签：
JavaScript
前端开发
缓存
关键词：
vue axios
VUE.js计算属性
VUE.js属性
VUE.js计算
VUE.js生命周期
敬之学长
目录
相关文章
雨溪-yuxi
|
26天前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期）
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期，从初始化到销毁各阶段的关键钩子函数及其应用场景，帮助你更好地理解Vue的工作原理。如果你觉得有帮助，欢迎关注我，将持续分享更多优质内容！🎉🎉🎉
雨溪-yuxi
22 1
vue学习第十二章(生命周期）
html的七十二变
|
1月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
43 7
html的七十二变
|
2月前
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中，父组件和子组件的生命周期钩子执行顺序如下：
html的七十二变
45 3
邹荣乐
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
邹荣乐
141 4
dufadayang
|
2月前
|
JavaScript
vue生命周期钩子函数的执行顺序是怎样的？
【10月更文挑战第14天】
dufadayang
32 2
我是快乐的嘟嘟
|
2月前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
我是快乐的嘟嘟
42 2
html的七十二变
|
2月前
|
监控 JavaScript 开发者
在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的
在 Vue 中，子组件不能直接修改父组件传递的 Prop，以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop，Vue 会通过响应式系统检测到这一变化，并在控制台发出警告，提示开发者避免这种操作。
html的七十二变
138 3
java冯坚持
|
2月前
|
JavaScript 前端开发 开发者
VUE学习一：初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识，包括初识Vue、指令如v-for、v-on的使用、动态属性绑定（v-bind）、计算属性等概念与实践示例。
java冯坚持
65 1
张志凌
|
2月前
|
JavaScript 前端开发 API
深入探索挖掘vue3 生命周期
【10月更文挑战第10天】
张志凌
45 0
邹荣乐
|
2月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
邹荣乐
126 0