vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明

刺骨的言语ヽ痛彻心扉 2023-02-24 15:28 10阅读 0赞

### vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明 ###

*  vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明
 *   *  1 过滤器filter
     *   *  1.1 过滤器的使用
         *  1.2 全局过滤器与局部过滤器
     *  2 生命周期与钩子函数
     *   *  2.1 生命周期
         *  2.2 钩子函数
     *  3 axios的使用
     *  4 有关数据监听和计算的属性
     *   *  4.1 监视数据变化 - watch
         *  4.2 计算属性
     *  4 响应式数据的说明
     *   *  4.1 动态添加的数据是无效的以及$set的使用
         *  4.2 异步DOM更新以及$nextTick的说明

# vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明 #

## 1 过滤器filter ##

### 1.1 过滤器的使用 ###

**作用：文本数据格式化。**  
vue没有提供过滤器，需要使用过滤器，首先需要自己定义一个过滤器，过滤器用于格式化文本的输出， 比如对时间进行格式化 数字的格式化。

/* // 1. 先定义一个过滤器 // 2. 使用一个过滤器 // 过滤器可以在插值表达式中使用 // | 在linux操作系统中叫做管道符 // { { msg | myFilter }} */
    // 定义过滤器
        // 参数1： 过滤器的名字
        // 参数2： 过滤的逻辑
        // Vue.filter('过滤器的名字', function() {})
        // input就是需要过滤的内容
        Vue.filter('myFilter', function (input) { 
          console.log(input)
          return input.toUpperCase()
        })

例子如下（过滤时间）：

<body>
      <div id="app">
        <h1>{ { date | dateFilter('YYYY-MM-DD')}}</h1>
        <h1>{ { date | dateFilter('HH:mm:ss')}}</h1>
        <h1>{ { date | dateFilter}}</h1>
      </div>
    
      <script src="vue.js"></script>
      <script src="./node_modules/moment/moment.js"></script>
      <script>
        Vue.filter('dateFilter', (input, format) => { 
          format = format || 'YYYY-MM-DD HH:mm:ss'
          // 方式1： 可以获取年月日时分秒 格式化 
          // moment() 表示当前时间
          // moment(date): 表示一个指定的时间
          // format:表示格式化
          return moment(input).format(format)
        })
        var vm = new Vue({ 
          el: '#app',
          data: { 
            msg: 'hello vue',
            date: new Date()
          }
        })
      </script>
    </body>

### 1.2 全局过滤器与局部过滤器 ###

1.通过全局方式创建的过滤器，在任何一个vue实例中都可以使用。

// 创建全局过滤器, 全局过滤器在所有的vue实例中都能使用
         Vue.filter('myFilter', function (input) { 
           return '111'
         })

2.局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用。

// 局部过滤器： 只有在当前vue实例中才能使用的过滤器
        var vm = new Vue({ 
          el: '#app',
          // 提供数据
          data: { 
            msg: 'hello vue'
          },
          methods: { 
    
          },
          // 提供过滤器
          filters: { 
            // 一个局部过滤器
            myFilter: function (input) { 
              return input.toUpperCase()
            }
          }
        })

## 2 生命周期与钩子函数 ##

### 2.1 生命周期 ###

简单说：**一个实例从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。**  
组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！  
生命周期和钩子函数的关系图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]

### 2.2 钩子函数 ###

*  生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
 *  注意：vue再执行过程中会自动调用`生命周期钩子函数`，我们只需要提供这些钩子函数即可
 *  注意：钩子函数的名称都是固定的！！

<body>
    
      <div id="app">
        <p>{ { msg}}</p>
      </div>
    
      <script src="vue.js"></script>
      <script>
    
        // beforeXXX
        // XXXed
        var vm = new Vue({ 
          el: '#app',
          data: { 
            msg: 'hello vue'
          },
          beforeCreate() { 
            // 在初始化数据之前调用, vm中没有data中的数据
            console.warn('beforeCreate钩子函数')
            console.warn(this.msg)
          },
          created() { 
            // 在数据初始化后执行的钩子函数
            console.warn('created钩子函数')
            console.warn(this.msg)
          },
          beforeMount() { 
            // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
            console.warn('beforeMount钩子函数')
            var div = document.getElementById('app')
            console.warn(div.innerHTML)
          },
          mounted() { 
            console.warn('mounted钩子函数')
            var div = document.getElementById('app')
            console.warn(div.innerHTML)
          },
          beforeUpdate() { 
            // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
            console.warn('beforeUpdate钩子函数')
            var div = document.getElementById('app')
            console.warn(div.innerHTML)
          },
          updated() { 
            console.warn('updated钩子函数')
            var div = document.getElementById('app')
            console.warn(div.innerHTML)
          },
          beforeDestroy() { 
            // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
            console.warn('beforeDestroy钩子函数')
          },
          destroyed() { 
            // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
            console.warn('destoryed钩子函数')
          },
        })
      </script>
    </body>

## 3 axios的使用 ##

vue自身没有提供发送ajax请求的工具。  
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

*  安装：`npm i -S axios`

<body>
      <script src="./node_modules/axios/dist/axios.js"></script>
      <script>
        // 发送get请求
        // .then:成功的时候需要执行的逻辑
        axios.get('http://localhost:9999/getBrandList')
          .then(function (res) { 
            console.log(res.data)
          })
    
        // get请求和post请求
        // axios.get('http://localhost:9999/getBrandInfo?id=2')
        // .then(res => { 
        // console.log(res.data)
        // }).catch(err => { 
        // console.log('接口失败了', err)
        // })
    
        // axios.post('http://localhost:9999/addBrand', { 
        // name: '奇瑞',
        // desc: 'qq',
        // time: new Date()
        // }).then(res => { 
        // console.log(res.data)
        // })
      </script>
    </body>

## 4 有关数据监听和计算的属性 ##

### 4.1 监视数据变化 - watch ###

*  概述：`watch`是一个对象，键是需要观察的表达式，值是对应回调函数。
 *  作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

<body>
      <div id="app">
        <input type="text" v-model='msg'><span>{ { tips}}</span>
        <p>{ { msg}}----{ { name}}</p>
      </div>
    
      <script src="vue.js"></script>
      <script>
        // 每次msg改变的时候， 都喊一下 666
        // 想要监听某个数据的变化， 需要使用 watch 监听，监视
        var vm = new Vue({ 
          el: '#app',
          // 提供vue的数据
          data: { 
            msg: '',
            name: 'zs',
            tips: ''
          },
          // 提供方法的
          methods: { 
    
          },
          // 过滤器
          filters: { 
    
          },
          // 监听vue实例的属性的变化
          // 如果msg长度是3-6位，提示校验通过
          // 如果msg长度不是，校验不通过
          watch: { 
            // 只要msg发生了改变，就会执行function
            // newVal: 修改后的值 oldVal: 修改前的值
            msg: function (newVal, oldVal) { 
              if (newVal.length >= 3 && newVal.length <= 6) { 
                this.tips = '校验通过'
              } else { 
                this.tips = '校验不通过'
              }
            }
          }
        })
      </script>
    </body>

监听一个复杂对象：  
1.监视对象的时候，需要加上deep: true；为了发现对象内部值的变化，可以在选项参数中指定 deep: true。  
2.immediate 属性,立马进行监听

watch: { 
            // 如果想要监听复杂类型，需要使用到watch完整形态
            // key: 需要监听的属性
            // 值： 是一个对象
            msg: function (value) { 
              console.log('监听到内容了', value)
            },
            car: { 
              handler: function (value) { 
                console.log('监听到了car的变化', value)
              },
              // 如果需要监听一个对象，必须指定deep为true。 除了监听本对象，还会监听对象中的属性
              deep: true,
              // 页面加载，会立即监听一次
              immediate: true
            },
            list: { 
              handler: function (value) { 
                console.log('监听到了没', value)
              },
              deep: true
            }
          }

### 4.2 计算属性 ###

计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

<body>
      <div id="app">
        <input type='number' v-model="n1"> +
        <input type="number" v-model="n2"> =
        <span>{ {  sum }}</span>
    
        <p>{ { reverse}}</p>
      </div>
    
      <script src="vue.js"></script>
      <script>
    
        // 计算属性也是一个属性，和data中提供的属性类似
        var vm = new Vue({ 
          el: '#app',
          data: { 
            msg: 'hello vue',
            n1: 0,
            n2: 0
          },
          // 用于给vue提供数据的， 提供的数据是计算属性
          // 计算属性 ： 这个属性的值是根据其他数据计算而来的
          // 计算属性： key: 提供的计算的属性名
          // 计算属性： 值 是一个函数，这个函数里面就是计算的逻辑, 返回值就是计算属性的值
          // 计算属性：当依赖的数据发生了改变的时候，计算属性自动重新计算一次，值跟着就发生了改变
          computed: { 
            sum: function () { 
              return +this.n1 + +this.n2
            },
            reverse: function () { 
              return this.msg.split('').reverse().join('')
            }
          }
        })
        // 如果没有一个新的属性，只需要监听已经存在的某个属性的变化，变化了需要做某件事情，使用watch
    
        // 如果需要提供一个新的属性，并且这个属性依赖于其他的一些属性计算而来的，应该使用computed
      </script>
    </body>

计算属性的完整形态：

/* 计算属性依赖于缓存设计的 当计算属性依赖的属性发生了改变的时候，计算属性就会重新计算，并且会把结果缓存起来 */
    computed: { 
            fullName: { 
              get() { 
                console.log('我是计算属性的get方法')
                return this.firstName + ' ' + this.lastName
              },
              set(value) { 
                this.firstName = value.split(' ')[0]
                this.lastName = value.split(' ')[1]
              }
            }
          }

## 4 响应式数据的说明 ##

### 4.1 动态添加的数据是无效的以及$set的使用 ###

data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的。

<div id="app">
        <p>{ { person.name}}---{ { person.age}}---{ { person.gender}}</p>
    </div>
    
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({ 
            el: '#app',
            data: { 
                person: { 
                    name: 'zs',
                    age: 18
                }
            }
        })
    </script>
    
    // 动态给data中添加的数据是无效的
    // 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的
    // 但是动态绑定的数据不是响应是的。
    vm.person.gender = '男'

如果想要动态绑定数据，并且是响应式的,需要使用vm.$set方法:

this.$set(this.person, 'gender', '男')

### 4.2 异步DOM更新以及$nextTick的说明 ###

在vue中数据发生了改变，DOM中的数据也会跟着发生改变，但是这个过程是异步的。  
vue的数据发生改变之后，DOM不会立即更新，会等到下一次渲染工作执行的时候才会更新DOM。  
目的：为了提高渲染的性能.

clickFn () { 
        // 数据变化了， view中的内容也要跟着变
        this.msg = '你好啊，vue1'
        this.msg = '你好啊，vue2'
        this.msg = '你好啊，vue3'
        this.msg = '你好啊，vue4'
        this.msg = '你好啊，vue5'
    
        // 为什么：DOM操作是非常消耗性能的，简单DOM的操作能够提升我们的性能，如果每次操作数据，都立即更新DOM，无疑性能会非常的低，所以vue中会等待数据都修改完成
        let result = document.querySelector('p').innerHTML
        console.log(result)
    }

*  `$nextTick`方法会在DOM更新之后执行

// 在实际开发中，有可能需要在数据改变之后，获取到更新之后的DOM数据
    // 这个时候可以使用 $nextTick函数
    // 当vue更新完DOM后，会自动调用$nextTick函数，确保在这个函数中可以获取到DOM结构是最新的
    this.$nextTick(function() { 
        let result = document.querySelector('p').innerHTML
        console.log(result)
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: /images/20230209/9cf77ff2ba9e47e1988ac9e9049ddb82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 1]: /images/20230209/aedd7adb34f749d7a2d14a2c1e328739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70 2]: /images/20230209/647c934e1cf34e32bfc4a8e3c004d9bf.png