Data Property 和方法

Data Property

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

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) // =>

这些实例 property 仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。必要时，要对尚未提供所需值的 property 使用 null、undefined 或其他占位的值。

直接将不包含在 data 中的新 property 添加到组件实例是可行的。但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它。表现为 $data取不到值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app" class="demo"></div>
</body>
<script>//var与let、const的区别//var声明的变量会挂载在window上，而let和const声明的变量不会//let和const声明形成块作用域在大括号//const:一旦声明必须赋值,不能使用null占位。声明后不能再修改。如果声明的是复合类型数据，可以修改其属性。const app = Vue.createApp({data() {return {count: 4,}}})const vm = app.mount('#app');vm.count = 6;console.log("vm.$data.count = " + vm.$data.count);console.log("vm.count = " + vm.count);vm.count = 4;console.log("vm.$data.count = " + vm.$data.count);console.log("vm.count = " + vm.count);//直接将不包含在 data 中的新 property 添加到组件实例是可行的。vm.name = "陈声铭";console.log("vm.name = " + vm.name);//但由于该 property 不在背后的响应式 $data 对象内，所以 Vue 的响应性系统不会自动跟踪它.表现为$data取不到值。console.log("vm.$data.name = " + vm.$data.name);
</script>
</html>

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

方法

我们用 methods 选项向组件实例添加方法，它应该是一个包含所需方法的对象：

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

Vue 自动为 methods 绑定this，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的this指向。在定义methods时应避免使用箭头函数，因为这会阻止 Vue 绑定恰当的 this指向。

这些 methods 和组件实例的其它所有 ‘property’ 一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用

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

在上面的例子中，点击 <button>时，会调用 increment方法。

也可以直接从模板中调用方法。就像下一章节即将看到的，通常换做计算属性会更好。但是，在计算属性不可行的情况下，使用方法可能会很有用。你可以在模板支持 JavaScript 表达式的任何地方调用方法：

<span :title="toTitleDate(date)">{{ formatDate(date) }}
</span>

如果 toTitleDate 或 formatDate 访问任何响应式数据，则将其作为渲染依赖项进行跟踪，就像直接在模板中使用过一样。
代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@next"></script>
</head>
<body><div id="app" class="demo"><!--这些 methods 和组件实例的其它所有 property 一样可以在组件的模板中被访问。--><!--在上面的例子中，点击 <button> 时，会调用 increment 方法。--><button @click="increment">Up vote</button><br><!--如果 toTitleDate 或 formatDate 访问任何响应式数据，则将其作为渲染依赖项进行跟踪，就像直接在模板中使用过一样--><span :title="toTitleDate()">{{ formatDate() }}</span></div>
</body>
<script>//var与let、const的区别//var声明的变量会挂载在window上，而let和const声明的变量不会//let和const声明形成块作用域在大括号//const:一旦声明必须赋值,不能使用null占位。声明后不能再修改。如果声明的是复合类型数据，可以修改其属性。const app = Vue.createApp({data() {return {count: 4,}},methods: {increment() {// `this` 指向该组件实例this.count++;console.log('执行increment方法后');console.log(this.count);},formatDate() {return '声铭哥哥好帅';},toTitleDate() {return '哥哥好帅';}}})const vm = app.mount('#app');console.log(vm.count); // => 4vm.increment();console.log('执行increment方法后');console.log(vm.count); // => 5
</script>
</html>

效果图

从模板调用的方法不应该有任何副作用，比如更改数据或触发异步进程。如果你想这么做，应该换做生命周期钩子。

防抖和节流

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@next"></script><!--导入lodash库--><script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
</head>
<body>
<div id="app" class="demo"><!--表达式控制按钮是否可用--><button @click="increment" >按钮</button>
</div>
</body>
<script>//var与let、const的区别//var声明的变量会挂载在window上，而let和const声明的变量不会//let和const声明形成块作用域在大括号//const:一旦声明必须赋值,不能使用null占位。声明后不能再修改。如果声明的是复合类型数据，可以修改其属性。const app = Vue.createApp({data() {return {count: 12,}},methods: {//如果某个组件仅使用一次，可以在 methods 中直接应用防抖：increment: _.debounce(function (){// `this` 指向该组件实例this.count++;console.log('执行increment方法后');console.log(this.count);},1000)}})const vm = app.mount('#app');
</script>
</html>

但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数:

app.component('save-button', {created() {// 用 Lodash 的防抖函数this.debouncedClick = _.debounce(this.click, 500)},unmounted() {// 移除组件时，取消定时器this.debouncedClick.cancel()},methods: {click() {// ... 响应点击 ...}},template: `<button @click="debouncedClick">Save</button>`
})

VUE自学日志04-Data Property 和方法相关推荐

VUE自学日志02-应用与组件实例
准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例创建一个应用实例创建一个应 ...
VUE自学日志03-模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层组件实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML ...
VUE自学日志05-计算属性和侦听器
## 计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如,有一个嵌套数组对象: Vue.createApp({data() {re ...
VUE自学日志01-MVC和MVVM
一.需要了解的基础概念 Model(M)是指数据模型,泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开.这里的难点主要在于需要和前端约定统一的接口规则. View(V)是视图层,也就是 ...
SpringMVC自学日志04（Controller 及 RestFul风格）
控制器Controller 控制器复杂提供访问应用程序的行为,通常通过接口定义或注解定义两种方法实现. 控制器负责解析用户的请求并将其转换为一个模型. 在Spring MVC中一个控制器类可以包含多个 ...
Mybatis自学日志04（日志工厂）
日志工厂如果一个数据库操作出现异常,日志就只最好的助手. LOG4J 标准日志 <settings><setting name="logImpl" value= ...
Spring自学日志04（java的方式配置Spring）
使用java的方式配置Spring 稳现在完全不使用xml配置,java来做 javaConflg是spring的一个子项目,在Spring4后,它成为了一个核心功能. import com.java ...
Vue(ES6)中的data属性为什么不能是一个对象？
以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例.如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 ...
vue 报错 Cannot read property ‘__ob__‘ of undefined的解决方法
vue 报错 Cannot read property '__ob__' of undefined的解决方法参考文章: (1)vue 报错 Cannot read property '__ob__' ...

VUE自学日志04-Data Property 和方法

Data Property 和方法

Data Property

方法

效果图

防抖和节流

VUE自学日志04-Data Property 和方法相关推荐

最新文章

热门文章