Data属性和方法
Data属性
在组件中Data是一个函数，Vue会在创建组件实例时调用它。Data函数应该返回一个对象，Vue会将这个对象包含进它的响应式系统并用$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 //为vm.count赋值时同时会更新$data.count vm.count = 5 console.log(vm.$data.count) // => 5 //反之一样 vm.$data.count = 6 console.log(vm.count) // => 6 这些实例属性仅会在当前实例首次创建时加载，所以你要确保它们已在data函数中被定义。如果有必要，对于一些暂时没有值的变量使用null,undefined或其他其他占位符赋值。
你也可以直接新增一个属性到data中，但是这个属性没有备份到响应式的$data中，所以它不会自动被Vue响应式系统管理。
Vue使用$前缀通过组件实例暴露内置的API。同时它也为内部属性保留了_前缀。你要避免在data的顶部属性中使用这两个前缀。
方法
我们使用methods选项在组件实例中添加方法。它是一个包含一系列方法的对象：
const app = Vue.createApp({ data() { return { count:4 } }, methods: { increment() { // `this`指向组件实例。 this.count++ } } }) const vm = app.mount('#app') console.log(vm.count) // => 4 vm.increment() console.log(vm.count) // => 5 Vue自动绑定指向组件实例的this对象。这可以保证当在方法中使用事件监听或方法回调时在方法有正确的this值。定义methods时就避免使用箭头函数，它会阻止Vue绑定正确的this。
像其他组件实例属性一样，方法在组件模板内部可访问。在组件内部最常用的用法是当作事件监听：
<button @click="increment">投票</button> 上面这个例子，当按钮点击时，increment方法将被调用。
也可以在方模板中直接调用方法。马上我们会看到，平时我们使用计算属性来代替方法。但在一些计算属性不能使用的场景下直接使用方法还是比较有用的。你可以在模板内任意地方使用JavaScript表达式来调用方法：
<span :title="toTitleDate(date)"> {{ formatDate(date) }} </span> 如果toTitleDate或formatDate访问任意响应式数据定义，它将会被渲染成模板依赖，就像它们直接在模板中使用一样。(如上例子中两个方法的参数：date)
模板中调用方法不应该任何副作用，像更改Data属性或触发异步进程，如果你想这么做，应该使用生命周期勾子代替。
方法 - 防抖动及节流
提示
函数防抖(debounce)：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。
函数节流(throttle)：
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。
Vue没有内置防抖动及节流，但你可以通过如类库Lodash来实现。
下面这个示例组件只会使用一次，在方法中可以直接使用防抖动：
<!DOCTYPE html>
<html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>vue demo4</title> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script> </head> <body> <div id="app"> <input type="text" @input="changing" /> </div> </body> <script type="text/javascript"> const app = { data() { return { count: 0 } }, methods: { changing: _.debounce(function(){ console.log("输入发生改变："+ (++this.count) + "次") },500) } } Vue.createApp(app).mount("#app") </script> </html> 看看执行结果：
但在多个组合复用时会产生问题，因为它们共用相同的防抖动函数。为了保持各组件相互独立，我们可以在created生命周期勾子中进行防抖动处理：
app.component('save-button', { created() { // Debouncing with Lodash this.debouncedClick = _.debounce(this.click, 500) }, unmounted() { // Cancel the timer when the component is removed this.debouncedClick.cancel() }, methods: { click() { // ... respond to click ... } }, template: ` <button @click="debouncedClick"> Save </button> ` })
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
