Vue3.0基础教程：data属性、计算属性、侦听器、Class与style绑定

VUE3.0 学习笔记 3（Vue3.0教程）

Vue组件中的Data Property和方法

Data Property

​ 组件中的data是一个函数，他返回一个data对象，里面包含着用户定义的组件的属性变量，当根组件挂载到某个DOM元素上创建好组件实例后，Vue将data以$data的形式存在于组件中

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

以上两种方式都可以访问到count，通过其中任何一个访问形式对count重新赋值都会改变另外一个访问形式获取的值，如下

vm.$data.count=5;
console.log(vm.count)       // => 5

Vue 使用 $ 前缀通过组件实例暴露自己的内置 API。它还为内部 property 保留 _ 前缀。应该避免使用这两个字符开头的的顶级 data property 名称。

方法

通过组件中的methods选型向组件里添加方法，methods是一个包含所需方法的对象

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods:{
    add() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})
const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.add();

console.log(vm.count) // => 5

注意：在methods中的方法不能使用箭头函数，Vue会为方法里的this自动绑定为组件实例，即this是组件实例的引用；而如果你使用的是箭头函数，this引用的是父级的元素：windows，而组件内的data是一个函数，拥有自己的作用域，外层Windows访问不了其属性值。

我们可以看到，箭头函数里的this是window对象。

我们也可以在属性中使用函数

<button @click="fun()">
</button>

当button被点击时会执行函数fun()

防抖动和节流

防抖动主要是指防止某个函数的执行间隔不一，通过防抖动可以使函数按照规定的时间间隔执行一次，Vue没有提供相应的防抖动和节流，但是可以通过Lodash等库来实现:

/*用法一*/
 Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函数
      click: _.debounce(function() {
        // ... 响应点击 ...
      }, 500)
    }
  }).mount('#app')
/*用法二：通过生命周期钩子进行调用*/
app.component('save-button', {
  created() {
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 响应点击 ...	
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})

计算属性

顾名思义，计算属性是通过一个函数进行逻辑计算得到返回值，主要是为了简化模板语法的表达式计算，模板语法支持简单的计算，但是如果计算过于复杂就会显得过于冗杂

let demo={
		data(){
			return {
				demoNum:"<span style=\"color:red\">你好</span>",
				att:"id",
				age:18,
				num:0
			}
		},
		computed:{
			ifAdult(){
				return this.age>=18? "已成年":"未成年";
			}
		}
	}

如computed下的ifAdult就是一个计算属性，你可以在模板语法里如下方式使用,我们可以看到无参的计算属性不需要括号

<div id="demo">
	<span>是否已成年</span><br/>
	<span>{{ifAdult}}</span>
</div>

注意：计算属性和方法不同，计算属性是有缓存的，如果计算属性所依赖的属性没有发生改变（如上面的计算属性ifAdult依赖于age）那个计算属性会直接从缓存获取，并不会重新计算值，如如下的计算属性并不会实时更新

computed:{
    now(){
        return new Date.now();
    }
}

计算属性默认只用getter方法，你可以自定义setter方法

computed:{
    ifAdult:{
        get(){
            return this.age>=18? "已成年":"未成年";
        },
        set(age){
            this.age=age;
        }
    }
}
组件实例.ifAdult=20/*此时set方法将会被调用*/

侦听器

主要是用来监听data数据的变化并作出相应操作，通过watch属性来实现

const vm = Vue.createApp({
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
}).mount('#demo')

监听器里的函数名需要和监听的变量名相同，参数是回调参数有两种：

watch:{
    /*val是变化后的值*/
    dataName(val){
        
    },
    /*newValue是变化后的值，oldValue是变化前的值*/
    dataName2(newValue,oldValue){
        
    }
}

Class与Style绑定

对象语法

HTML里元素的样式是写入到style属性，或通过css文件对相关的id或class属性进行绑定，因此可以通过Vue提供的v-bind指令来实现动态样式，特别的，vue将v-bind指令作用于class和style属性时做了增强，表达式除了字符串外还支持数组和对象。

<div :class="{age:isAge}"></div>

如以上用法，age的存在与否是根据data中isAge的真值，如data中存在isAge:true则会被渲染成

<div :class="age"></div>

否则会被渲染成

<div class></div>

:class属性可与class属性共存

<div class="num" :class="{age:isAge}"></div>

在isAge=true的情况下，将会被渲染成

<div class="num age"></div>

计算属性式

除了以上的用法，我们还可以使用计算属性来实现绑定，这是最重要最常用的一种用法

<span :class="adultColor">{{ifAdult}}</span>

data(){
    return {
        age:18
        num:0,
        isAge:false
    }
},
computed: {
  adultColor(){
    return {
        red:this.age<18,
        green:this.age>=18
    }
}
}

.red{
	color: red;
}
.green{
	color: lawngreen;
}

数组语法

我们可以把一个数组传给class以实现一个class列表

<div :class="[activeClass, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

如果你需要根据条件切换class可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

等价于

<div :class="[{ active: isActive }, errorClass]"></div>

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

如果你需要根据条件切换class可以使用三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

等价于

<div :class="[{ active: isActive }, errorClass]"></div>

组件上使用

待续…