（尚硅谷）Vue笔记--------28

初识setup

跟着笔记第一步，我们先去创建一下setup函数:

在vue2中我们是把数据写在data里，把函数写在methods里，现在我们都不用了，我们就把这些都写在setup里。

所以我们现在在这个里面给它加上数据和方法：

 接下来我们来说我们setup的返回值：

先说返回一个对象：

因为数据和方法都是在setup中写，我们就不需要调用数据时写this了。

 

 

然后现在看着笔记我们来学第二种返回值情况：

 

我们这种返回函数的形式，有两个return，一个是返回方法，一个是返回渲染函数h的内容。 

我们也可以把返回函数时精简一下：

 

看看前端页面：

 我们vue2能用到的我们vue3还是可以使用的，我们这个是向下兼容的：

 

 

 

 

但是我们极其不要去尝试vue2和vue3混着写，会出现一点原因，我们来演示一下：

 

 

我们在vue2中是能读到vue3的配置的。

我们现在来去在vue3中读取vue2的配置：
 

 

 

出事了，我们发现我们读出了两个undefind数值。

我们现在再做一个操作，我们同时在vue2和vue3里都配置一个统一的数据a，并赋值不同，我们看看会打印什么值：

 

 

 

我这里报错了，说属性的key值a重复了。但是如果你们不报错，a值应该是200.

ref函数 处理基本类型 

 

我们现在做个方法，更改这个人的信息：

 

 

 

奇怪的是我们点击按钮，信息却无法被改变。

 

 

信息改变了，但是却没有去渲染到页面上。

我们这么定义的数据只是单纯普通的字符串，我们应该加上ref修饰，就变成真正的vue数据了：

 

别忘了我们需要引入ref

 

 我们再去试试我们的更改功能：

 

还是不好使。

还是不好使。。。。。那是什么原因呢？

 

我们发现它是两个对象。

 

我们发现它有get,set方法也有value方法。

所以要想真正取到数据并且做改动应该调用get,set方法：