当前位置：首页 > news >正文

Vue3_基础使用_1

news 来源：原创 2025/5/9 17:28:21

这节主要介绍： vue2与vue3的区别，创建响应式的数据，setup语法糖的使用，watch监听，及vue3创建项目。

vue2的选项式与vue3的组合式区别：

选项式：vue2中数据与方法计算属性等等，针对一个数据的处理在不同的配置中，当业务复杂时很难维护，修改起来也不好查找。

vue3的组合式：将针对数据的方法计算属性等等放在一起管理，利于管理，方便查找。

0.创建项目，到文件夹cmd 输入： npm create vue@latest

然后输入一个项目名称，然后除了TypeScript为YES其他都选NO到最后会生成一个项目。

代码：

1.在其中定义：变量，数组，对象，方法 html中就能直接{{}}使用

<script  lang="ts" setup>
......
</script>

2.引用说明

ref：添加响应式的简单变量和对象，使用需要加 .value 可以借助插件自动补全.value

reactive：只是给对象添加响应式,使用不用加.value

watch：引入监听

watchEffect：引入更高级的监听，不需要告诉他监视什么，他自己根据你的代码去识别。

import {ref,reactive,watch,watchEffect} from 'vue'

3.使用ref创建一个可以使用的简单的变量。

//html 中直接{{user}}
<script  lang="ts" setup>
   //引入
   import {ref,reactive} from 'vue'
   let user=ref("php");
   let pwd=ref("123456");
</script>

留意lang="ts" setup

4.使用reactive创建一个可以使用的简单的对象。

//html中{{msg.id}}
<script  lang="ts" setup>
   //进入
   import {ref,reactive} from 'vue'
   let msg=reactive({id:1,StationName:"珠海北"});
</script>

5.当中可以创建计算属性，方法，监视等等

<script  lang="ts" setup>
    //引入方法
    import {ref,reactive,watch,watchEffect} from 'vue'
    //声明响应式数据
    let info=ref({name:"evan.pei",age:30,skill:["vue","c#"]});
    //方法
    function updateAge(){
       info.value.age++;
     }
    //watch,对象属性监听用方法()=>...
    watch(()=>info.value.age,(n)=>{console.log("age变成了",n)});

     //watchEffect进行监听，他会自动去代码块中识别哪些要监听
    watchEffect(()=>{
      if(info.value.age>=35)
          info.value.name="EvanPei";
    });
</script>

6.计算属性

//计算属性
import {computed} from 'vue'
let name=computed(()=>{return name+"~";})
//toRefs:结构化赋值后可以直接用 let{name,age}=toRefs(person)将大括号中的变量转为ref的。

7.停止监视接收wacth用于停止，deep:true深度监视对象里面全部都监视

//监视 watch
import {watch,watchEffect} from 'vue'
const stopWatch=watch(sum,(newV,oldV)=>{ 
    ...逻辑
	if(newV>=10)
		stopWatch();//停止监视
},
{deep:true,//深度监视 
 immediate:true//立即监视
})

8.其他

//因为reactive不能直接替换整个对象，需要借助Object.assign
//这个相当于把对象的每个值赋值一遍而不是直接替换对象
Object.assign(person,{...});
//监视对象中的某一个属性,或者是对象(如需深度监视加deep:true)
watch(()=>{return person.name},(n,o)=>{...})
//同时监视多个
watch([()=>person.name,()=>person.car.c1],()=>{...})
//watchEffect监视，不需要指定监视谁它自己根据你写的逻辑去分析
watchEffect(()=>{...})//直接写逻辑

9.插件：可以设置name,自动加.value