一、前言
通过前面两章，我们已经了解了vue的基本结构组成，从本文开始，我们就正式踏入vue的语法学习。
这里提醒一下，当运行命令npm run dev后，你在项目中对代码文件做出的一切改动都会直接反应到页面上。
不过前提是你编辑文件后按了Ctr+S保存文件，又或者开启了vscode中“自动保存”文件的功能，否则是看不到效果的。
二、响应式
vue中最重要且最基础的内容就是“响应式”，这部分的内容你同样也可以在官方文档中找到：
不过官方教程的目标群众是给对前端有一定基础的人看的，新手一上去很可能就会被其各种专业名词搞得头昏脑胀。
说简单点响应式其实就是一个更高级的变量，比如在前文中我写过这样的代码：
如果你写普通的变量：
let msg="hello world,vue"
其实也能用上图中的语法将其显示到html中：
<div>
{{ msg }}
</div>
但不同的地方在于，如果之后你修改了msg的值，比如在某个点击事件中将msg修改为了"hello"，html中的字符串是不会变的，依旧还是前面的"hello world,vue"。
而响应式变量就比较高级了，它就是用来弥补这一缺点的， 无论你怎么变，它都会实时显示到html页面中。
1.ref
响应式变量的创建在vue中有两种方式，第一种就是这里用到的ref函数，你可以直接从vue中将其引入。
而使用方法就是用它将数据包括起来即可：
const a1=ref(10); //数字
const a2=ref(true); //bool
const a3=ref("string"); //string
const a4=ref(['1','2']); //array
const a5=ref({ //object
msg:'111',
age:999
});
const a6=ref(); //undefine
const a7=ref(null); //null
同时要注意我这里的写法，因为ref函数返回的是一个特殊的对象，并不是其原始的数据，所以我们一般都是使用const声明的。
正如这里所说，它是一个对象，我们的数据其实是放在该对象上的属性value上的，所以如果你想要在js代码中修改、访问该数据，就必须通过value属性进行访问，以上面声明好的响应式变量为例：
a1.value=20;
a2.value=false;
a3.value="test";
a4.value[0]='3';
a5.value.msg="222";
a6.value="string";
a7.value=999;
上面分别是各种数据类型的访问、修改方式，可以看到，和正常的数据相比，其实也是中间多了一个value属性而已。
而之所以在html中我们不需要写value，是因为vue自动帮我们解引用了。
ref函数名实际上是reference单词的缩写，也就是“引用”的意思。
当然，我们也可以自己手动对其解引用，使用到的函数为unref：
console.log(a1.value);
console.log(unref(a1));
该函数就是专门用来解引用、获取其原始数据对象的，比如上面两句代码的效果就是完全一样的。
不过要注意，解引用之后得到的值是只读的，也就是不能对其进行修改，如果你希望修改，那还是要使用value属性进行。
所以可能很多情况下都只会在响应式的对象上对其使用解引用，方面书写。
下面对其代码演示一下：
可以看到，两个打印语句打印出来的内容都是一样，同时修改响应式变量的值也会直接反应到页面标签上。
当然，这里举的例子并不明显，因为这种情况下即使只是普通变量修改依旧会反映到html标签上，原因在于这里同在初始化的代码块中，执行完成后msg变量就直接是hello了，显示的自然也是hello。
而如果是在点击事件中修改两者的数据，就能非常清晰的看出普通变量与响应式变量两者之间的差距了。
