# vue学习

**Repository Path**: zhu_y_j/vue-learning

## Basic Information

- **Project Name**: vue学习
- **Description**: 尚硅谷
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-04-18
- **Last Updated**: 2024-08-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1.计算属性computed，会受data影响，data里面的数据一变，他会顺带修改computed数据，然后也作用到页面上

2.data的的数据只要一改，会瞬间作用到页面上，是因为data中的数据做了代理，每次setter的时候，都会重新解析vue模板，重新渲染一次

3.元素体内如果需要用到vue的data数据 需要{{}}，如果是元素的属性需要用到 就有好几种方式了v-model;v-bind;v-if;v=for;v=show.....不需要加大括号了。

4.无线循环，如果执行下面的代码会无线循环，原因：当我们执行21行代码的时候，我们执行定时器，但是定时器的内容确实修改了data数据，vue有一个铁律：只要动了data中的数据，就一定会重新渲染模板，然后渲染模板的同时，我又执行了21行函数，然后我又去改了data，然后我又执行了21行。。。。。。。。。死循环。

![2021-09-16_001307](\assets\2021-09-16_001307.jpg)



# Vue数据改变原理

太重要了。

## 问题

vue就和页面双向绑定了，为啥data发生变化页面也跟着变呢/跟着重新渲染页面呢？

## 解释

我可以以java的角度去说：一般遇到这种，我们就能想到，被增强了，没错，那vue在哪增强了呢？

vue在渲染页面之前做了：

1. 加工data（增强，也就是便利我们这个js对象，并且为对象生成字段的getter、setter，当我们修改数据的时候就触发去做其他的时候，那vue是用什么前端技术呢？也是前面讲到的Object.defineProperty）
2. vm.data = data（我们写的data）

千万不要妄想直接操作（加、删、改）data里面的数据，因为vm里面都是增强后的数据。需要用Vue提供的api：`Vue.set`。

![image-20240328230844362](assets/image-20240328230844362.png)	

请看上图，Vue自动的帮我们把data数据使用Object.defineProperty增强了，生成了getter、setter。并且是嵌套的。

那么此时，我们手动的`vm._data.car.bb="你大爷"`。根本没有生成getter、setter，vue根本不承认你的写法，那么bb这个属性发生变化后，也不会触发任何东西。此处必须使用`vue.Set`

![image-20240328231003584](assets/image-20240328231003584.png)	

## 数组

数组是个特殊，得单独说，我们继续观察data

![image-20240328231226109](assets/image-20240328231226109.png)	

数组hobby，根本没有对应得getter、setter，那么请问，此时我们再怎么修改hobby里面得元素，vue会渲染页面吗？肯定不会啊，我们根本没增强。

但是vue作者也考虑到咱们有修改数组元素得需求，所以他监测了数组Array的一些列方法，当我们调用数组的写的函数的时候，他会自动重新渲染一下。

## 总结

如果一个数据，他有getter、setter方法，你就可以直接 `数据=值`的形式修改它。如果没有，你就必须使用`Vue.set`或`vue提供的数组操作函数`。