【Vue3】第一部分 初步认识Vue3

【Vue3】第一部分 初步认识Vue3

---

---

1. 初步认识Vue3

1.1 准备工作

1. 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli如果需要升级，你应该需要全局重新安装最新版本的 @vue/cli，这里可以查看一下脚手架的版本： vue --version
2. 安装或者是升级@Vue/cli : npm install -g @vue/cli
3. 创建脚手架 : vue create vue_test
4. 启动 : npm run serve

1.2 分析工程结构

// 引入不在是Vue的构造函数，引入的是一个名叫createApp的工厂函数
import App from './App.vue'
import { createApp } from 'vue'

createApp(App).mount('#app')

// 创建一个应用实例对象（相当于在Vue2中vm，但是比vm更加 轻）
// const c = createApp(App)

//挂载
// c.mount('#app')

//卸载
// setTimeout(() => {
//     c.unmount("#app")
// }, 1000);

1.3 初步认识 setup

1. setup是Vue3中的一个新的配置项，值为一个函数
2. setup是所有组件API展示的舞台
3. 组件中所用到的数据、方法等等均都要配置在setup中
4. setup有两种返回值：
   – 如果返回的是一个对象，则对象中的属性、方法，均可以在模板中直接使用
   – 如果返回的是一个渲染函数，则可以自定义渲染的内容（了解）
5. 注意不要和Vue2的配置混合使用

<template>
  <div>
    <h1>欢迎学习Vue3！！！</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>性别：{{gender}}</h2>
    <button @click="sayHello">自我介绍</button>
  </div>
</template>

<script>
      
// import {h} from "vue"
      
export default {
  name:"App",

  setup(){
    let name = 'Tree'
    let age = 18
    let gender = '男'

    function sayHello(){
      alert(`大家好！我叫${name},今年我${age},性别${gender}`);
    }

    return{
      name,
      age,
      gender,
      sayHello
    }
    
     // 返回的是一个渲染函数，h需要导入，第一个参数表示要元素，第二个参数表示内容
    // return ()=>{return h('h1','Hello! Vue3! ')}

  }

}
</script>

1.4 ref函数

作用：定义一个响应式数据

语法：const xx = ref('xxx')

• 创建一个包含响应式数据的引用对象
• ref 返回的是一个对象，对象中有一个我们很需要的属性value
• JS中操作数据：xxx.value
• 在模板中读取数据是不需要.value,直接使用，因为在解析模板的时候会帮我们加上
• ref接收的数据可以是基本类型，也可以是对象类型
• 基本类型的数据：依然是依靠Object.defineProperty()中的get和set完成的
• 对象类型的数据：内部是依靠了Vue3中的一个新的函数-----reactive函数

具体代码

<template>
  <div>
    <h1>欢迎学习Vue3！！！</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>性别：{{gender}}</h2>
    <h2>职业：{{job.salary}}</h2>
    <h2>薪水：{{job.profession}}</h2>
    <button @click="modify">修改信息</button>
  </div>
</template>

<script>
// 导入ref
import {ref} from "vue"
export default {
  name:"App",

  setup(){
    // 使用ref实现数据响应
    let name = ref('张三')
    let age = ref(18)
    let gender = ref('男')
    let job = ref({
      salary:'16k',
      profession:'前端工程师'
    })

    function modify(){
      name.value = 'Tree'
      age.value = 60
      gender.value = '女'
      job.value.salary = '18k'
      job.value.profession = '后端工程师'
    }


    return{  //返回的一个对象
      name,
      age,
      gender,
      job,
      modify
    }

  }

}
</script>

<style>

</style>

1.5 reactive函数

作用：定义一个对象类型的响应式数据（基本类型不要使用，要用ref函数）

语法：const 代理对象 = reactive(源对象) 接收一个对象（或数组），返回一个代理对象（proxy对象）

• reactive定义的响应式数据是深层次的
• 内部是基于Proxy实现，通过对代理对象操作源对象内部数据进行操作

<template>
  <div>
    <h1>欢迎学习Vue3！！！</h1>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <h2>职业：{{person.job.profession}}</h2>
    <h2>薪水：{{person.job.salary}}</h2>
    <button @click="modify">修改信息</button>
  </div>
</template>

<script>
// 导入ref
import {reactive} from "vue"
export default {
  name:"App",

  setup(){
   
    const person = reactive({
      name:'Tree',
      age:18,
      gender:'男',
      job:{
        profession:'前端工程师',
        salary:'10k'
      }
    })

    function modify(){
      person.name = '张三',
      person.age = 15,
      person.gender = '女'
      person.job.profession = '后端工程师'
      person.job.salary = '12k'
    }


    return{  //返回的一个对象
      modify,
      person
    }

  }

}
</script>

<style>

</style>

---

总结

以上就是今天要讲的内容，本文介绍了一些Vue3的相关知识，希望对大家有所帮助！！