Vue 常用属性 data、methods、computed、watch

富士康质检员张全蛋

已于 2023-12-05 12:03:11 修改

阅读量983

点赞数 1

分类专栏： Vue.js 文章标签： vue.js

于 2023-06-21 09:30:51 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/131282220

版权

Vue.js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

数据属性

组件的 data 选项是一个函数（data里面是有return的）。Vue 会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。
它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来。（本来是使用this.$data.msg点出来，现在this.msg就可以出来了）

vm.$data.msg其实和vm.msg就是同一个东西，就像一个语法糖。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
        <!--引入并且使用变量-->
      msg:{{ msg }}
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    msg: "hello"
                }
            }
        } 
    
    //创建vm实例并且返回，vm是实例的名称
    const vm = Vue.createApp(HelloVueApp).mount("#vue")
    //将vue实例挂载到对应的dom上面去，干了两件事情，第一初始化实例，其次是挂载 
    // 'Hello Vue!'
    
    console.log(vm)
    console.log(vm.msg)
    vm.msg = "hello world"
    console.log(vm.$data.msg) 
   
    </script>

</body>

</html>

方法

方法(methods)：处理数据的函数，在methods选项中定义的函数称为方法。

在 methods 选项中定义的方法与 data 选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。在模板中，它们通常被当做事件监听使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>count:{{ count }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
          data(){
            return{
                count: 0
            }
        },
         methods:{
            increment(){
                this.count++
            }
        },
         mounted(){
          this.increment()
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

在mounted里面调用方法也是一样使用this。无论方法还是变量在使用的时候都使用this（块里面使用this，外面使用变量vm对象）。

计算属性

计算属性(computed):根据所依赖的数据动态显示新的计算结果。

示例 : 需要在 {{}} 里添加计算再展示数据，例如统计分数，数值计算一般用法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <button type="button" @click="increment()">增加</button>
       <p>总分:{{ chinese + math + english }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

computed计算属性用法：

计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。

而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用methods 的原因 !

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
    </style>
</head>

<body>    
    <div id="hello-vue">
       <p>总分:{{ sum }}</p> 
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                chinese: 10,
                math: 20,
                english: 30
            }
        },
        computed:{
            sum: function(){
              let a = this.math + this.chinese + this.english
              return a 
            }
        }
      }
      const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。

计算属性的声明，也能跟变量一样，用于template当中，data中是没有sum这个变量，但是在computed属性里面声明了这个变量。其实就是在computed里面可以定义变量和匿名函数。

监听属性

监听属性(watch)：是一个观察动作，监听data数据变化后触发对应函数，函数有newValue(变化之后结果)和oldValue(变化之前结果)两个参数。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

某些值在变化了被监听到之后，获取数据，展示出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="hello-vue">
      <p>旧值：{{ oldmsg }}</p>
      <p>新值:{{ watchnewmsg }}</p>
      <button type="button" @click="btn()">按钮</button>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                oldmsg: "Hello Vue!",
                watchnewmsg: '111'
            }
        },
        methods:{
            btn(){
               this.oldmsg = 'Hello xxxx'
            }
        },
        watch: {
            oldmsg: {
                handler(newValue, oldValue) {
                console.log(newValue, oldValue)
                this.watchnewmsg = newValue
            }
        }
     }
        //立即处理，进入页面就触发
        immediate: true
    }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

watch里面写的是监听哪个属性，当这个属性值发生变化了就会触发watch。

可以看到老的值是hello vue，新的值是hello xxx。函数里面只定义了oldmsg的变化，并没有定义watchnewmsg的变化。

富士康质检员张全蛋

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 常用属性 data、methods、computed、watch

计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。
复制链接

扫一扫

专栏目录