前端vue3学习记录1

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 只能创建对象类型的响应式数据, 注意函数，数组都是对象类型