—— vite的学习开篇-vue3.0以及ref,computed 的使用——
学习vite之前,我们先来简单的认识一下vue3.0
1.使用 vite 必须使用node 12及以上的版本
vue -v
检测一下版本是vue多少的版本
2.下面写个例子进行比较一下,vue2.0与vue3.0简化
2.上面使用的是vue2.0的编写代码方式:
可以看到,vue2.0,就是简单是双向绑定和事件的调用,这里就不一一讲解
3. 重点:vue3.0的编写代码方式composition-api
关于ref我特别的翻译了一下
接受一个内部值并返回一个反应性且可变的的ref对象,ref对象具有指向内部值的单个属性.value
理解:比如我可以定义一个msg的变量,就类似于我定义一个参数叫msg为啥用const 略过,也就是说这个ref通过给value属性设置setter和getter实现数据劫持,实现了双向绑定
ref:让数据变成响应式,即改变会引发视图层的变化也就是vue2.0中的数据双向绑定,可以简单理解成v-model双向绑定
ref()里的值为初始值,我们可以随便定义
ref通过给value属性设置setter和getter实现数据劫持
我这里使用了eslint,如果const msg = ref('我立志要报效祖国')
这样的话,会报eslint 检测因为我们这里包套了没有解套,取不到咱们初始化的值,setup(){ return{ 返回你的参数,msg,会自动解套}
}
4.setup的认识(vue3.0)
过去我们使用的是Options API
事件监听的使用