直接访问name当这两个值变化时`fullName` 也会自动更新
一、直接访问
直接访问是最简单的方法，就像直接拿东西一样。你只需要用名字就能找到和修改data里的数据。示例代码：
```javascript data() { return { name: 'Vue.js', age: 3 } } ``` 在这个例子中，你可以用`this.name`和`this.age`来访问和修改`name`和`age`。二、计算属性
计算属性就像是给数据加个过滤器，它会在数据变化时自动更新。示例代码：
```javascript computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } ``` 在这个例子中，`fullName` 是一个计算属性，它依赖于 `firstName` 和 `lastName`。当这两个值变化时，`fullName` 也会自动更新。三、方法调用
方法调用就像是给数据开个小差，你需要告诉它怎么做，然后它才会帮你处理。示例代码：
```javascript methods: { getTotalPrice() { return this.price * this.quantity; } } ``` 在这个例子中，`getTotalPrice` 是一个方法，它会返回 `price` 和 `quantity` 的乘积。四、对比与选择
不同的方法有各自的好处和不好处，你需要根据情况来选。 | 方法 | 优点 | 缺点 | |------------|----------------------------------------|--------------------------------------------| | 直接访问 | 简单直接，容易懂 | 只适用于简单操作，复杂操作需要其他方法 | | 计算属性 | 自动更新，适合复杂依赖关系的数据 | 不能接受参数 | | 方法调用 | 灵活多变，适合复杂逻辑 | 需要手动调用，不能自动更新 |五、实例说明
为了更好地理解，看一个例子。示例代码：
```javascript data() { return { products: [ { name: 'Laptop', price: 1000 }, { name: 'Smartphone', price: 500 } ], searchQuery: '' } }, computed: { filteredProducts() { return this.products.filter(product => product.name.includes(this.searchQuery)); }, totalQuantity() { return this.filteredProducts.reduce((total, product) => total + product.quantity, 0); } }, methods: { addProduct(newProduct) { this.products.push(newProduct); } } ``` 在这个例子中，`filteredProducts` 是一个计算属性，根据 `searchQuery` 过滤 `products` 数组。`totalQuantity` 也是一个计算属性，计算过滤后的商品总数量。`addProduct` 是一个方法，用于添加新的商品。