Vue Data Property

Data Property

组件的data选项是一个函数

Vue会在创建新组件实例的过程中调用此函数

它返回一个对象，以$data的形式存储到组件实例中

//创建Vue对象
const app = Vue.createApp({
     data(){//data函数，返回对象
        retrun {count:4}
     }
})
//将Vue挂载到id为app的元素上
const vm = app.mount('#app')
//在js中获取Vue中data函数值的方法，用组件实例直接调用即可
console.log(vm.$data.count)  // = > 4
console.log(vm.count)        // = > 4

//修改vm.count的值也会更新 $data.count
vm.count = 5
console.log(vm.$data.count)   // = > 5
//反之亦然
vm.$data.count  = 6;
console.log(vm.count)    //=> 6

这些实例property仅在实例首次创建时被添加，所以你需要确保他们都在data函数返回的对象中

必要时，要对尚未提供所需值的property使用null,undefined或其他占位的值

直接将不包含在data中的新property添加到组件实例是可行的

但是由于该property不在背后的响应式$data对象内，所以Vue的响应性系统不会自动跟踪它

Vue使用$和_前缀通过组件实例暴露自己的内置API

你应该避免使用这两个字符开头的dataproperty名称

方法

通过methods选项向组件实例添加方法

它是一个包含所需方法的对象

//创建vue
const app = Vue.createApp({
    data(){//向组件实例添加属性
      retrun{ count : 4}
    },
    methods:{//向组件实例添加方法
        increment(){
           //`this` 指向该组件实例
           this.count++
        }
    }
})

//将Vue挂载到元素上
const vm = app.mount('#app')
console.log(vm.count)  //=> 4
//调用实例方法
vm.increment()
console.lgo(vm.count)  //=> 5

Vue自动为methods绑定this,以便它始终指向组件实例

定义methods时应避免使用箭头函数，因为这会阻止Vue绑定恰当的this指向

<button @click = "increment"> Up vote </button>

点击button时，会调用increment方法

也可以直接从模板中调用方法

<div id="app">
<!--    vue绑定title的值，该值为toTitleDate返回的结果。注意方法传入的参数date为vue的data函数中的属性-->
    <span :title="toTitleDate(date)">
<!--    使用模版语法调用formatDate(date) 该值为formatDate返回的结果。注意方法传入的参数date为vue的data函数中的属性-->
        {{ formatDate(date) }}
    </span>
</div>
 
<script>
    // 创建vue
    const app = Vue.createApp({
        data() {// 向组件实例中添加一个日期属性
            return {
                date: new Date()
            }
        },
        methods: {// 向组件实例添加方法
            toTitleDate: function (date) { // 将日期格式化后返回
                return date.toLocaleString();
            },
            formatDate: function (date) { // 将日期格式化后返回
                return date.toLocaleString();
            }
        }
    })
    // 将vue挂载到元素上
    const vm = app.mount('#app')
 
</script>

防抖和节流

Vue没有内置支持防抖和节流，但可以使用Lodash等库来实现

如果某个组件仅使用一次，可以在methods中直接应防抖函数

Vue.createApp({
       methods:{
      //用Lodash的防抖函数
      click: _.debounce(function(){
            //响应点击
      },500)
     }
}).mount('#app')

这种方法对于可复用组件有潜在的问题

因为它们都共享相同的防抖函数

为了使组件实例彼此独立

可以在生命周期钩子的created里添加该防抖函数

<div id="app">
<!--使用vue组件-->
    <save-button></save-button>
</div>
 
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
    // 创建vue
    const vue = Vue.createApp({});
    // 创建组件 （组件名，参数）
    vue.component('save-button', {
        created() { // 钩子函数创建后执行
            // 用 Lodash 的防抖函数
            this.debouncedClick = _.debounce(this.click, 500)
        },
        unmounted() { // 钩子函数卸载后执行
            // 移除组件时，取消定时器
            this.debouncedClick.cancel()
        },
        methods: { // 组件需要的方法集合
            click() {
                alert(2)
            }
        },  // 定义组件使用模版
        template: `
          <button @click="debouncedClick">
          Save
          </button>
        `
    })
    // 将vue挂载到元素上，注意一定要放在创建组件后面，组件才能正常运行。
    vue.mount('#app');
</script>