Vue 常用属性

vue常用的属性有：
 • 数据属性
 • 方法
 • 计算属性
 • 监听属性

数据属性

组件的data 选项是一个函数。Vue 会在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后Vue 会通过响应性系统将其包裹起来，并以$data 的形式存储在组件实例中。为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来：

<div id="abc">
  <div :style="StyleObj" class="test">hello world</div>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        msg: "Hello vue"
      }
    }
  }
  const a = Vue.createApp(bindStyle).mount('#abc')
  console.log(a.$data.msg)
  a.msg= "hahahaha"
  console.log(a.$data.msg)
  a.$data.msg="111"
  console.log(a.msg)
</script>

方法

方法（methods）：处理数据的函数。在methods选项中定义的函数称为方法。
示例：添加方法及调用

<div id="abc">
<p>{{ a }}</p>
  <button type="button" @click="data">增</button>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        a: 1
      }
    },methods: {
      data() {
        this.a++
      }
    }
  }
  Vue.createApp(bindStyle).mount('#abc')
</script>

计算属性

计算属性（computed）：根据所依赖的数据动态显示新的计算结果。
示例：需要在{{}}里添加计算再展示数据，例如统计分数

<div id="abc">
<p>{{ a + b + c }}</p>
  <span>总数： {{ sum }}</span>
  <p></p>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        a: 10,
        b: 20,
        c: 30
      }
    },computed : {
       sum: function (){
         return this.a + this.b + this.c
       }
    }
  }
  Vue.createApp(bindStyle).mount('#abc')

  计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用methods的原因！

监听属性

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

div id="abc">
<p>显示的信息：{{ msg }}</p>
  <p>监听的信息: {{ msg2 }}</p>
  <button type="button" @click="btn">修改显示信息</button>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        msg: "java天下第一",
        msg2: ""
      }
    },watch: {
      msg(newValue, oldValue){
          console.log(newValue,oldValue)
        this.msg2 = newValue
  }
    },methods: {
       btn(){
         this.msg = "PHP是世界上最好的语言"
       }
    }
  }
  Vue.createApp(bindStyle).mount('#abc')
</script>