vue3 基础-data-methods-computed-watch

本篇来简单了解 vue 的数据, 方法, 计算属性和监听器等相关内容.

data ( )

vue 里面的 data ( ) 函数返回一些能供模板 template 直接使用的数据, 以变量的方式进行 return 出去.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> data () </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          show: false
        }
      },
      template: `<div>{{message}}</div>`
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

要改变 message 的值, 只需要通过:

vm.$data.message = 'youge'

当然如果 data ( ) return 的数据变量只有一层, 则可以更简单地用:

vm.message = 'youge'

methods: { }

里面用来放一些有 dom 元素绑定事件的方法. 值得注意的是这些方法的 this 都指向了 app 实例.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> methods: { } </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world'
        }
      },
      methods: {
        // 方法的 this 都指向了 app 哦
        handleClick () {
          console.log('click', 'this的指向是app的$data.message,', this.message)
        },
        // 传参数也是可以的哈
        formatString (str) {
          return str.toUpperCase()
        }  
      },
      template: `<div @click="handleClick">{{message}} 点我</div>`
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

在控制台则会输出:

click this的指向是app的$data.message, hello, world

因此在 methods 中, 如果要用到 this 的特性, 是不能用箭头函数的, 因为箭头函数的 this 指向外层, 即这里 app 的外层, 这样就会一直找到了 window 对象啦. (变量作用域). 所以还是用传统的 "小括号, 花括号" 的方式来写哦. 最后, 既然是方法 (或者函数) 也都是可以传参的.

computed: { }

用来存储一个动态计算的属性值. 先以一个不太优雅的方式来实现一个计算过程, 如果不用 computed 的话:

<!DOCTYPE html>
<html lang="en">
<head>
  <title> computed 前世 </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          count: 8,
          price: 5
        }
      },
      template: `<div>总价是: {{ count* price }}</div>`
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

则会显示: "总价是: 40". 如果为了让这种固定计算的代码变得更加有语义化一些, 则就可以定义一个语义化的计算属性, 假设名字叫 money. 其是一个动态计算的值, money = count * price.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>computed:{ }</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          count: 8,
          price: 5
        }
      },
      computed: {
        money () {
          return this.price * this.count
        }
      },
      template: `<div>总价是: {{ money }}</div>`
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

假设现在动态去改变 count 的值, 如:

vm.count = 100

则对应的计算属性 money 的值也会自动变为 100 * 5 = 500.

因此 computed 计算属性指的是 "这个属性值" 是由其他几个数据 "计算" 出来的. 当相关数据发生变化时, 其计算属性值也会动态更新. 从个人使用的体验来看, 用计算属性确实会让代码逻辑更加语义化和优雅很多.

最后要能区分的是 computed 和 methods 里面的方法的差异在于:

computed 只有当依赖的内容发生变化, 才会重新计算
methods 只要页面重新渲染 (mounted) 就会重新计算

由此可见 computed 会带有一种 "缓存" 的机制, 从而降低页面一渲染就要计算所带来的消耗.

watch: { }

用来监听数据的一些变化等做一些异步的处理. 假设我们要监听上栗的 price 属性, 当其发生变化的时候, 隔3秒进行一些逻辑处理:

<!DOCTYPE html>
<html lang="en">
<head>
  <title> watch: {} </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          count: 8,
          price: 5
        }
      },
      watch: {
        // 监听 price, 当其发生变化3秒后, 打印一个 "price changed"
        price () {
          setTimeout(() => {
            console.log('price changed')
          }, 2000);
        }
      }
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

则这里的 watch 对 price 进行了监听. 当 price 的值发生变化时, 则会触发一些异步处理的逻辑哦.

甚至还能监听到该数据前后变化的值, 比如我们要监听 price 的当前值和变化前的值:

<!DOCTYPE html>
<html lang="en">
<head>
  <title> methods: { } </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          count: 8,
          price: 5
        }
      },
      watch: {
        // 都是形参哈
        price (current, prev) {
          console.log("price 当前是:", current, "之前是: ", prev)
        }
      },
        
    const vm = app.mount('#root')
  </script>
</body>
</html>

则控制台显示:

price 当前是: 888 之前是:  5

利用这种特性, 不难想到上栗的 computed 来计算 money 也可以用 wath实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <title> methods: { } </title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { 
          message: 'hello, world',
          count: 2,
          price: 5,
          money: 10
        }
      },
      watch: {
        // 当 price 发生变化时, 函数会执行, 都是形参哈
        price (current, prev) {
          this.money = current * this.count
        }
      },
      template: `<div>总价是: {{ money }}</div>`
    })

    const vm = app.mount('#root')
  </script>
</body>
</html>

最后小结一波吧:

本篇整体对 data (), methods: { }, computed: { }, watcher: { } 的基本用户和场景有初步介绍
computed 和 methds 都能实现的功能, 推荐用 computed, 因为有一定的 "缓存" 机制
computed 和 watcher 都能实现的功能, 推荐用 computed, 因为写起来更简洁

posted @ 2022-08-27 14:29 致于数据科学家的小陈阅读(525) 评论(0) 编辑收藏举报

刷新页面返回顶部

宁鸣而死

学无止境, 气有浩然.

vue3 基础-data-methods-computed-watch

公告