vue3 - vite项目
1.vite 项目中,index.html 是项目入口文件
2.vue3通过 createapp 函数来创建应用实例的
vue2 与vue3的联系与区别
vue2是options api 分散式, 而vue3是Composition api 组合式集中,
在vue2中,所有数据基本都写在data内,所有方法都写在methods内,而在vue3中我们可以将关于某一个数据或对象的相关方法和信息放置在一起,可以更好的维护
下面借助两张图片来理解
vue3中拉开序幕的setup
vue3 中的setup 和 传统vue2中的 data 和 methods 中的区别和之间的联系
setup的生命周期是比较前的,他会优先先执行setup中的内容。
注意:要将setup()接口中的数据和方法return出去, 不然外面的模板就无法访问里面的数据和方法
<script lang="ts">
export default {
name: 'person'
setup() {
vue3 中setup内的this是undefined的
//所以如果这样定义这些数据不是响应式数据,数据是修改了,但是页面中显示的数据是没有发生改变的
let name = '陈欢'
// 方法
function Changename() {
name = 'ch'
console.log(name)
}
return { name, Changename }
}
}
</script>
setup中不能用 this 指向,并且目前上述 setup中的数据 不是响应式数据,你的数据改变了,但是页面上显示的只是不会变化的
setup简写:通过script标签。就不用再用return返回你的数据和函数
按照下面这样写的话,在script标签里的数据就自动向外return出去,不用在担心忘记向外return出去
<script lang="ts" , setup>
let name = '陈欢'
// 方法
function Changename() {
name = 'ch'
console.log(name)
}
}
</script>
定义响应式数据:
vue2:中在data 里面就是响应式数据了,
而在vue3中则不同,ref 和 reactive 方法
setup 中导入
import {{ ref }} from 'vue'
import {{ reactive}} from 'vue'
//例如:那个数据是响应式就给他加 ref 函数 :
let name = ref('陈欢')
// reactive 定义对象响应式
let car = reactive({brand: 'su7', price: 100010 })
ref 定义响应式数据后,在setup和所有js文件中使用响应式数据时需要用 name.value 来使用响应式数据
ref 创建基本类型的响应式数据,也能创建对象类型的响应式数据
reactive 只能创建对象类型的响应式数据, 注意函数,数组都是对象类型