知识点讲解 isnt this_使用Vue3.0，我收获了哪些知识点（二）

拼搏现实的明天。 2023-01-06 04:24 15阅读 0赞

最近在工作之余一直学习`Vue3.0`相关知识，虽然`Vue3.0`至今还是`rc`版，但这并不影响我们去学习。今天这篇文章是我关于`Vue3.0`的第四篇文章。在前文中我们讲解了如何通过`vite`和`vuecli`搭建`Vue3.0`开发环境，然后介绍了`Vue3.0`中的`setup`,`reactive`,`ref`等，今天这篇文章主要讲解了以下内容:

1.  `Vue3.0`中使用`watch`
2.  `Vue3.0`中使用计算属性
3.  `Vue3.0`中使用`vue-router`
4.  `Vue3.0`中使用`vuex`

**本文首发于公众号【前端有的玩】，这是一个专注于`Vue`与`面试`相关的公众号，提升自己的市场竞争力，就在【前端有的玩】。同时点击以下链接即可访问小编关于`Vue3.0`的其他相关文章**

学习Vue3.0,先来了解一下Proxy

使用`vite`搭建一个`Vue3.0`学习环境

使用Vue3.0，我收获了哪些知识点(一)

### `Vue3.0`中使用`watch` ###

`watch`在`Vue3.0`中并不是一个新的概念，在使用`Vue2.x`的时候，我们经常会使用`watch`来监听`Vue`实例上面的一个表达式或者一个函数计算结果的变化。

#### 回顾`Vue2.0`中的`watch` ####

在`Vue2.0`中，我们使用`watch`可以通过下面多种方式去监听`Vue`实例上面的表达式或者函数计算结果的变化,如下罗列了其中的几种

1.  最常规使用方式
    
        export default {
               
          data() {
               
        return {
               
        name: '子君',
        info: {
               
        gzh: '前端有的玩'
              }
            }
          },
        watch: {
               
            name(newValue, oldValue) {
               
        console.log(newValue, oldValue)
            },
        'info.gzh': {
               
              handler(newValue, oldValue) {
               
        console.log(newValue, oldValue)
              },
        // 配置immediate会在watch之后立即执行
        immediate: true
            }
          }
        }
    
    我们可以在`watch`属性里面配置要监听的`Vue`实例上面的属性，也可以通过`.`键路径去监听对象中的某一个属性的变化，也可以通过配置`immediate`在监听后立即触发，配置`deep`去深度监听对象里面的属性，不论嵌套层级有多深。
2.  使用`$watch`监听
    
    除了常规的`watch`对象写法之外，`Vue`实例上面提供了`$watch`方法，可以通过`$watch`更灵活的去监听某一个属性的变化。比如这样一个场景，我们有一个表单，然后希望在用户修改表单之后可以监听到表单的数据变化。但是有一个特殊的场景，就是表单的回填数据是异步请求过来的，这时候我们希望在后台请求完数据之后再去监听变化，这时候就可以使用`$watch`。如下代码所示:
    
        export default {
               
        methods: {
               
            loadData() {
               
              fetch().then(data => {
               
        this.formData = data
        this.$watch(
        'formData',
                  () => {
               
        // formData数据发生变化后会进入此回调函数
                  },
                  {
               
        deep: true
                  }
                )
              })
            }
          }
        }
3.  监听函数表达式
    
    除了监听字符串之外，`$watch`的第一个参数也可以是一个函数，当函数的返回值发生变化之后，触发回调函数
    
        this.$watch(() => this.name, () => {
               
        // 函数的返回值发生变化，进入此回调函数
        })

上文中就是`Vue2.0`中我们使用`watch`的一些常用写法，对于`Vue3.0`，因为其对`Vue2.0`做了部分的向下兼容，所以上面的用法在`Vue3.0`中基本都可以使用，但是`Vue3.0`一个很大的亮点就是`composition API`,所以除了`Vue2.0`中的写法之外，也可以使用`componsition api`中提供的`watch`

#### 在`Vue3.0`中使用`watch` ####

在`Vue3.0`中，除了`Vue2.0`的写法之外，有两个`api`可以对数据变化进行监听，第一种是`watch`,第二种是`watchEffect`。对于`watch`,其与`Vue2.0`中的`$watch`用法基本是一模一样的，而`watchEffect`是`Vue3.0`新提供的`api`

##### watch的用法 #####

下面的示例演示了如何使用`watch`

import { watch, ref, reactive } from 'vue'
    export default {
         
      setup() {
         
    const name = ref('子君')
    const otherName = reactive({
         
    firstName: '王',
    lastName: '二狗'
        })
        watch(name, (newValue, oldValue) => {
         
    // 输出 前端有的玩 子君
    console.log(newValue, oldValue)
        })
    // watch 可以监听一个函数的返回值
        watch(
    () => {
         
    return otherName.firstName + otherName.lastName
          },
          value => {
         
    // 当otherName中的 firstName或者lastName发生变化时，都会进入这个函数
    console.log(`我叫${value}`)
          }
        )
    
        setTimeout(() => {
         
          name.value = '前端有的玩'
          otherName.firstName = '李'
        }, 3000)
      }
    }

`watch`除了可以监听单个值或者函数返回值之外，也可以同时监听多个数据源，比如下面代码所示:

export default {
         
      setup() {
         
    const name = ref('子君')
    const gzh = ref('前端有的玩')
        watch([name, gzh], ([name, gzh], [prevName, prevGzh]) => {
         
    console.log(prevName, name)
    console.log(prevGzh, gzh)
        })
    
        setTimeout(() => {
         
          name.value = '前端有的玩'
          gzh.value = '关注我,一起玩前端'
        }, 3000)
      }
    }

##### watchEffect的用法 #####

`watchEffect`的用法与`watch`有所不同，`watchEffect`会传入一个函数，然后立即执行这个函数，对于函数里面的响应式依赖会进行监听，然后当依赖发生变化时，会重新调用传入的函数，如下代码所示:

import { ref, watchEffect } from 'vue'
    export default {
         
      setup() {
         
    const id = ref('0')
        watchEffect(() => {
         
    // 先输出 0 然后两秒后输出 1
    console.log(id.value)
        })
    
        setTimeout(() => {
         
          id.value = '1'
        }, 2000)
      }
    }

1.  停止执行
    
    `Vue2.0`中的`$watch`会在调用的时候返回一个函数，执行这个函数可以停止`watch`，如下代码所示
    
        const unwatch = this.$watch('name',() => {})
        // 两秒后停止监听
        setTimeout(()=> {
               
          unwatch()
        }, 2000)
    
    在`Vue3.0`中，`watch`与`watchEffect`同样也会返回一个`unwatch`函数，用于取消执行，比如下面代码所示
    
        export default {
               
          setup() {
               
        const id = ref('0')
        const unwatch = watchEffect(() => {
               
        // 仅仅输出0
        console.log(id.value)
            })
        
            setTimeout(() => {
               
              id.value = '1'
            }, 2000)
        // 1秒后取消watch，所以上面的代码只会输出0
            setTimeout(() => {
               
              unwatch()
            }, 1000)
          }
        }
    
    1.  清除副作用
        
        想象一下这样的一个场景，界面上面有两个下拉框，第二个下拉框的数据是根据第一个下拉框的数据联动的，当第一个下拉框数据发生变化后，第二个下拉框的数据会通过发送一个网络请求进行获取。这时候我们可以通过`watchEffect`来实现这个功能，比如像下面代码这样
        
            import { ref, watchEffect } from 'vue'
            
            function loadData(id) {
                     
            return new Promise(resolve => {
                     
                setTimeout(() => {
                     
                  resolve(
            new Array(10).fill(0).map(() => {
                     
            return id.value + Math.random()
                    })
                  )
                }, 2000)
              })
            }
            
            export default {
                     
              setup() {
                     
            // 下拉框1 选中的数据
            const select1Id = ref(0)
            // 下拉框2的数据
            const select2List = ref([])
                watchEffect(() => {
                     
            // 模拟请求
                  loadData(select1Id).then(data => {
                     
                    select2List.value = data
            console.log(data)
                  })
                })
            
            // 模拟数据发生变化
                setInterval(() => {
                     
                  select1Id.value = 1
                }, 3000)
              }
            }
        
        现在假如我切换了一下第一个下拉框的数据之后，这时候数据请求已经发出，然后我将这个页面切换到另一个页面，因为请求已经发出，所以我希望在页面离开的时候，可以结束这个请求，防止数据返回后出现异常，这时候就可以使用`watchEffect`为第一个回调函数传入的入参来处理这个情况，如下代码所示
        
            function loadData(id, cb) {
                     
            return new Promise(resolve => {
                     
            const timer = setTimeout(() => {
                     
                  resolve(
            new Array(10).fill(0).map(() => {
                     
            return id.value + Math.random()
                    })
                  )
                }, 2000)
                cb(() => {
                     
                  clearTimeout(timer)
                })
              })
            }
            
            export default {
                     
              setup() {
                     
            // 下拉框1 选中的数据
            const select1Id = ref(0)
            // 下拉框2的数据
            const select2List = ref([])
                watchEffect(onInvalidate => {
                     
            // 模拟请求
            let cancel = undefined
            // 第一个参数是一个回调函数，用于模拟取消请求，关于取消请求，可以了解axios的CancelToken
                  loadData(select1Id, cb => {
                     
                    cancel = cb
                  }).then(data => {
                     
                    select2List.value = data
            console.log(data)
                  })
                  onInvalidate(() => {
                     
                    cancel && cancel()
                  })
                })
              }
            }

### `Vue3.0`中使用计算属性 ###

想一想在`Vue2.0`中我们一般会用计算属性做什么操作呢？我想最常见的就是当模板中有一个复杂计算的时候，可以先使用计算属性进行计算，然后再在模板中使用，实际上，`Vue3.0`中的计算属性的作用和`Vue2.0`的作用基本是一样的。

1.  在`Vue2.0`中使用计算属性
    
        computed: {
               
            getName() {
               
        const { firstName, lastName } = this.info
        return firstName + lastName
            }
          },
2.  在`Vue3.0`中使用计算属性
    
        <div class="about"><h1>{
               { name }}h1>div>
        </template>