vue如何定义function

转载

月光倾城美 2024-10-11 13:17:54

文章标签 vue如何定义function vue.js javascript 前端响应式 文章分类 运维

本篇博文主要介绍vue3当中ref，reactive的响应式用法

知识点

ref
reactive

在setup函数定义变量之后，这个变量默认不是响应式的，也就是说，这个变量的值改变以后，页面上面显示的值不会改变，而如果要将变量转化为响应式的，我们需要使用ref和reactive

ref 用来将基本数据类型转变为响应式变量
reactive用来将复合数据类型转变为响应式变量

ref用法举例

如果在定义变量的时候不使用ref，这个变量默认不是响应式的

cost myview=Vue.creatApp({
    template:"<div>{ name }</div>",
     setup(props,context){
      let name="aaa";
      settimeout(
       ()=>{
        name="bbb";
        console.log(name);
           },2000 ); 
        return { name};     
          },    
       ;})
const vm=myview.mount("#mydiv");
//执行代码，我们发现控制台输出的name是bbb，这说明name的值已经发生了变化，但是在页面上面显示的值仍为aaa，这说明了setup定义的值默认是不响应的

而如果我们在setup函数当中，在定义变量的时候使用ref修饰，那么这个变量就会转变为响应式变量

const myview=Vue.creatApp({
       template:'<div> { name}</div>',
       setup(props,context){
       const { ref }=Vue;//引入ref
        let name =ref("aaa");//用ref来将变量变为响应式变量，ref函数底层使用的是proxy代理函数实现双向绑定，而proxy函数必须要接收一个对象，如果传入的数据是基本类型，例如'aaa',ref函数会将这个数据先转变为{value:'aaa'},所以我们在修改name的值的时候不能直接name='bbb',而是要使用name.value='bbb'
         settimeout(()=>{
           name.value="bbb";
           console.log(name);},2000);},
        return {name};})
 const vm=myview.mount("#mydiv");
//变量经过ref修饰以后变为响应式变量，我们看到，程序执行两秒以后，setup函数内的变量值发生了改变，并且页面所显示的变量值也发生了改变

reactive用法说明

reactive用法与ref类似，区别在于ref用于将基本数据类型变为响应式数据，而reactive则用于将符合数据类型（对象）转变为响应式数据

const myview=Vue.creatApp({ 
       template:'<div> { objname.name}</div>',
       setup(props,context){
        const { rective }=Vue;//引入reactive 
        let objname=reactive("{name:'abc'}");
        settimeout(()=>{
              objname.name='def';
            console.log(objname.name);
},2000);
},
       return{objname.name;}
;})
 const vm=myview.mount('mydiv');
//当setup函数当中objname.name的值发生变化时，页面上所显示的值也会发生变化

reactive还可以将数组数据变为响应式数据

const myview=Vue.creatApp({

 template:"<div> { myarr[0] } </div>",
setup(props,context){
 const { reactive }=Vue;
 const myarr=reactive([111]);//用reactive来修饰数组，将数组变为响应式数据
 settimeout(()=>{
   myarr[0]=222;
   console.log(myarr[0]);
},2000);
},
 return{ myarr}
})
const vm=myview.mount("#mydiv");