2024-01-31

原创

前端入门：认识Vue3和vite

使用create-vue搭建Vue3项目

认识 create-vue

create-vue是Vue官方新的脚手架工具，底层切换到了 vite(下一代前端工具链)，为开发提供极速响应

1.前提环境条件

已安装 16.0 或更高版本的 Node.js

2.创建一个Vue应用

npm init vue@latest

这一指令将会安装并执行 create-vue

安装过程中除了ESLint其他默认选NO后续需要用到时再添加

熟悉项目关键文件

1.vite.config.js-项目的配置文件基于vite的配置

2.package.json-项目包文件核心依赖项变成了 Vue3.x和 vite

3.main.js-入口文件 createApp函数创建应用实例

4.app.vue-根组件 SFC单文件组件 script-template-style

变化一:脚本script和模板template顺序调整
变化二:模板template不再要求唯一根元素
变化三:脚本script添加setup标识支持组合式API

5.index.html-单页入口提供id为app的挂载点

组合式API-setup选项

示例代码

<script setup>
const message='this is message'
const logMessage =()=>{
  console.log(message)
}
</script>
<template>
  <div>
    {{ message }}
    <button @click="logMessage"> log </button>
  </div>
</template>

<script>
export default {
  setup () {
    console.log('setup', this)
    const message = 'this is message';
    const logMessage = () => {
      console.log(message);
    }
    return {
      message,
      logMessage
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
}
</script>
<template>
  <div>
    {{ message }}
    <button @click="logMessage"> log </button>
  </div>
</template>

组合式APl-reactive和ref函数

reactive() 作用:接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤:

1.从 vue 包中导入 reactive 函数

2.在script中执行 reactive 函数并传入类型为对象的初始值，并使用变量接收返回值

<script setup>
  // 1.导入函数
  import { reactive } from 'vue'
  //2.执行函数 传入一个对象类型的参数 变量接收
  const state=reactive({
    count: 0
  })
  const setCount =()=> {
    state.count++
  }
</script>
<template>
  <div>
    <button @click="setCount">{{ state.count }}</button>
  </div>
</template>

ref()

作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤:

1.从 vue 包中导入 ref 函数

2.在 <script setup>中执行 ref 函数并传入初始值，使用变量接收 ref 函数的返回值

<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入参数 变量接收
const count = ref(简单类型或者复杂类型数据)
const setCount=()=>{
 //脚本区域修改ref产生的响应式对象数据 必须通过.value属性
 count.value++
}
</script>
<template>
  <div>
    <button @click="setCount">{{ count }}</button>
  </div>
</template>

总结

1.reactive和ref函数的共同作用是什么?

用函数调用的方式生成响应式数据 2. reactive vs ref ?

1.reactive不能处理简单类型的数据
2.ref参数类型支持更好但是必须通过.value访问修改
3.ref函数的内部实现依赖于reactive函数

3.在实际工作中推荐使用哪个?

推荐使用ref函数，更加灵活，项目主用ref

computed计算属性函数

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法核心步骤:

1.导入computed函数

2.执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

<script setup>
// 原始响应式数组
import { ref } from 'vue'
//1.导入computed
import { computed } from 'vue'
const list=ref([1,2,3,4,5,6,7,8])
//2.执行函数 return计算之后的值 变量接收
const computedList=computed(()=>{
  return list.value.filter(item =>item>2)
})
</script>
<template>
  <div>
    原始响应式数组-{{ list }}
  </div>
  <div>
    计算属性数组-{{computedList }}</div>
</template>

watch函数

作用:侦听一个或者多个数据的变化，数据变化时执行回调函数俩个额外参数:1.immediate(立即执行)2.deep(深度侦听)

基础使用-侦听单个数据

1.导入watch函数

2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const setCount =()=> {
 count.value++
}
//TODO:watch侦听单个数据源
//ref对象不需要加.value
watch(count,(newVal,oldVal)=>{
 console.log('count变化了',newVal,oldVal)
})
</script>
<template>
 <div>
  <button @click="setCount">+{{ count }}</button>
 </div>
</template>

基础使用-侦听多个数据

说明:同时侦听多个响应式数据的变化，不管哪个数据变化都需要执行回调

<script setup>
// 侦听多个数据变化
import { ref, watch } from 'vue'
const count = ref(0)
const changeCount=()=>{
 count.value++
}
const name = ref('cp')
const changeName=()=>{
 name.value='pc'
}
//TODO:watch侦听多个数据源
watch(
 [count,name],
 (
  [newCount,newName]
  [oldCount,oldName],
 )=>{
  console.log('count或者name变化了',[newCount,newName],[oldCount,oldName]);
}

immediate 说明:在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调

watch(count,(newVal,oldVal)=>{
 console.log('count变化了',newVal,oldVal)
},{
 immediate:true
})

watch函数-深度监听和精确监听

deep 默认机制:通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

<script setup>
import { ref, watch } from 'vue'
const sate=ref({count:0 })
const changeStateByCount=()=>{
 // 直接修改count
 state.value.count++
}
//watch深度侦听
watch(state,()=>{
 console.log('count变化了')
},{
 deep: true
})

精确侦听对象的某个属性需求:在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

<script setup>
import { ref, watch } from 'vue'
const state = ref({
 name: 'mogong',
 age: 18
})
const changeName=()=>{
 //修改name
 state.value.name='dddd'
}
const changeAge=()=>{
 //修改age
 state.value.age=22
}
watch(
 ()=>state.value.age,
 ()=>{
  console.log('age变化了')
 }
)
</script>

deep性能损耗尽量不开启deep