Vue2转Vue3快速上手第一篇（共两篇）-阿里云开发者社区

v2-v3的学习成本不高，只要有v2基础，基本可以上手vue3

一、setup语法

setup中不能访问v2的配置比如data，methods等

二、ref响应数据

使用ref可以创建一个对象，可以是基本类型，也可以是对象

例如：

<template>
  <div class="home">
    <!-- 渲染 -->
  {{a}}
  </div>
</template>
<script>
import { ref} from 'vue'
export default {
  name: 'Home',
  setup(){
    // 创建
  const a = ref('')
    // 使用方法  xxx.value
  a.value = 'NanChen'
  return{
  a,
  }
  },
}
</script>

三、reactive创建响应式数据

这是一个对象类型的响应数据，例：

<template>
  <div class="home">
    {{a.sex}}
    {{a.name}}
  </div>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "Home",
  setup() {
    const a = reactive({
      sex: "",
      name: "",
    });
    a.sex = "男";
    a.name = "NanChen";
    return {
      a,
    };
  },
};
</script>

四、computed 计算属性

例：

<template>
  <div>
    <div>
      姓：{{per.firstName}}
    </div>
    <div>
      名：{{per.lastName}}
    </div>
    <div>
      加起来：{{per.fullName}}
    </div>
  </div>
</template>
<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    let per = reactive({
      firstName: "Nan",
      lastName: "Chen",
    });
    per.fullName = computed(() => {
      return per.firstName + "++" + per.lastName;
    });
    return {
      per,
    };
  },
};
</script>
<style>
</style>

五、watch 监听器

例（一）：监听单个ref的响应式数据

<template>
  <div>
  监听<button @click="num++">+1查看监听器变化</button>
  <div>{{num}}</div>
  </div>
</template>
<script>
import { ref, watch } from "vue";
export default {
  setup() {
  let num = ref(0);
  watch(num,(newValue,oldValue)=>{
  console.log('newValue: '+newValue,' oldValue: '+oldValue);
  })
  return{
  num
  }
  },
};
</script>

例（二）：监听ref定义的多个响应式数据

<template>
  <div>
    <div>
      <button @click="num++">+1查看监听器变化</button>
      <div>num:{{num}}</div>
    </div>
    <div>
      <button @click="num2+='改动了'">改变</button>
      <div>num2:{{num2}}</div>
    </div>
  </div>
</template>
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let num = ref(0);
    let num2 = ref("监听多个ref响应式的使用");
    watch(
      [num, num2],
      (newValue, oldValue) => {
        console.log("num and num2 ", newValue, oldValue);
      },
      /* immediate：第一次就监听 */
      { immediate: true }
    );
    return {
      num,
      num2,
    };
  },
};
</script>

例（三）：监听reactive所定义的一个响应式数据

<template>
  <div>
    <div>
      <button @click="a.name+='XX'">更改姓名</button>
      <div>{{a.name}}</div>
    </div>
    <div>
      <button @click="a.age++">更改年龄</button>
      <div>{{a.age}}</div>
    </div>
  </div>
</template>
<script>
import { reactive, watch } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
     watch(a,(newValue, oldValue) => {
        console.log(newValue, oldValue);
      },{immediate:true,deep:false}//deep无效
    );
    return {
      a,
    };
  },
};
</script>

例（四）：监听reactive定义的一个响应式数据中的某一个属性

<template>
  <div>
    <div>
      <button @click="a.name+='XX'">更改姓名</button>
      <div>{{a.name}}</div>
    </div>
    <div>
      <button @click="a.age++">更改年龄</button>
      <div>{{a.age}}</div>
    </div>
  </div>
</template>
<script>
import { reactive, watch } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    watch(() => a.name,(newValue, oldValue) => {
        console.log(newValue, oldValue);
      }
    );
    return {
      a,
    };
  },
};
</script>

例（五）：监听reactive定义的一个响应式数据中的某些属性

<template>
  <div>
    <div>
      <button @click="a.name+='XX'">更改姓名</button>
      <div>{{a.name}}</div>
    </div>
    <div>
      <button @click="a.age++">更改年龄</button>
      <div>{{a.age}}</div>
    </div>
  </div>
</template>
<script>
import { reactive, watch } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    watch([() => a.name, () => a.age],(newValue, oldValue) => {
        console.log(newValue, oldValue);
      }
    );
    return {
      a,
    };
  },
};
</script>

例（六）：监听reactive定义的嵌套对象

<template>
  <div>
    <div>
      <button @click="a.name+='XX'">更改姓名</button>
      <div>{{a.name}}</div>
    </div>
    <div>
      <button @click="a.age++">更改年龄</button>
      <div>{{a.age}}</div>
    </div>
    <div>
      <button @click="a.obj.objList.num++">更改数字</button>
      <div>{{a.obj.objList.num}}</div>
    </div>
  </div>
</template>
<str>
import { reactive, watch } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
      obj: {
        objList: {
          num: 100,
        },
      },
    });
    watch(() => a.obj,(newValue, oldValue) => {
        console.log(newValue, oldValue);
      },{ deep: true }); // 这里是坚挺的reactive对象中的某个属性，因此deep生效
    // deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。
    return {
      a,
    };
  },
};
</script>

六、watchEffect 监听器

特性，也可以说成和watch的区别

不需要手动传入依赖

每次初始化时会执行一次回调函数来自动获取依赖

无法获取到原值，只能得到变化后的值

<template>
  <div>
    <div>
      <button @click="a.name+=' hello'">更改姓名</button>
      <div>{{a.name}}</div>
    </div>
    <div>
      <button @click="a.age++">更改年龄</button>
      <div>{{a.age}}</div>
    </div>
  </div>
</template>
<script>
import { reactive, watchEffect } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    watchEffect(() => {
      console.log(a.name);
      console.log(a.age);
    });
    setTimeout(() => {
      a.name += " hi";
      a.age++;
    }, 1000);
    return {
      a,
    };
  },
};
</script>

七、Vue3生命周期

所有的声明周期要放在setup中

Vue3的生命周期如下：

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

语法

setup() {
    onMounted(() => {
      console.log('mounted')
    })
}

八、toRef

说白话文就是不用写前面的对象名称直接渲染里面的属性即可

<template>
  <div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{num}}</div>
  </div>
</template>
<script>
import { reactive, toRef } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
      list: {
        num: 0,
        num1: 1,
        num2: 2,
        num3: 3,
        num4: 4,
      },
    });
    return {
      name: toRef(a, "name"),
      age: toRef(a, "age"),
      num: toRef(a.list, "num"),
    };
  },
};
</script>

九、toRefs 响应式转换

一键给对象中的多个属性全部响应转换

<template>
  <div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{num}}</div>
    <div>{{num1}}</div>
    <div>{{num2}}</div>
    <div>{{num3}}</div>
    <div>{{num4}}</div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
      list: {
        num: 0,
        num1: 1,
        num2: 2,
        num3: 3,
        num4: 4,
      },
    });
    return {
      ...toRefs(a),
      ...toRefs(a.list),
    };
  },
};
</script>

十、shallowReactive (浅响应式)

只处理对象最外面一层的响应式数据(浅响应式)

<template>
  <div>
    <h1>姓：{{name}}</h1>
    <h2>岁数：{{age}}</h2>
    <h3>对象{{obj.objList.name}}</h3>
    <button @click="name += '+'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="obj.objList.name += '！'">修改对象</button>
  </div>
</template>
<script>
import { reactive, toRefs, shallowReactive } from "vue";
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let a = shallowReactive({
      // 只将第一层数据做了响应式处理
      name: "NanChen",
      age: 20,
      obj: {
        objList: {
          name: "Jia", // 深层次的数据将会是一个普通的对象
        },
      },
    });
    // 将数据返回出去
    return {
      ...toRefs(a),
    };
  },
};
</script>

十一、shallowRef 不进行对象响应式

只处理基础数据类型的响应式，不进行对象类型的响应式。

<template>
  <div>
    <h1>姓：{{a}}</h1>
    <button @click="a += '+'">修改姓名</button>
    <h2>{{b.num}}</h2>
    <button @click="b++">修改num</button>
  </div>
</template>
<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    // 定义了一段数据
    let a = shallowRef("NanChen");
    let b = shallowRef({
      num: 1,
    });
    console.log(b.value.num);
    // 将数据返回出去
    return {
      a,
      b,
    };
  },
};
</script>

这里可以看到，修改数据后将不会在触发页面的更新因为监测不到了

十二、readonly（深只读）

const a = shallowRef({
  name: 'NanChen', // 只读
  obj: {
    objList: 2 // 也是只读
  }
})

十三、shallowReadonly（浅只读）

const a = shallowReadonly({
  name: 'NanChen', // 只读
  obj: {
    objList: 2 // 不是只读
  }
})

十四、toRaw 将响应式对象转换成普通对象

例：

<template>
  <h2>姓名：{{a.name}}</h2>
  <h2>年龄：{{a.age}}</h2>
  <button @click="showRawA">点我显示原始a</button>
</template>
<script>
import { reactive, toRaw } from "vue";
export default {
  name: "Demo",
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    function showRawA() {
      console.log("a=", a);
      let p = toRaw(a);
      console.log("raw a = ", p);
    }
    return {
      a,
      showRawA,
    };
  },
};
</script>

这里可以看到使用toRaw后，响应式对象变成了一个普通的对象

十五、markRaw 永久不响应

这里看一下使用markRaw和不使用markRaw的区别

不使用markRaw

看这个例子：

<template>
  <h2>姓：{{a.name}}</h2>
  <div v-if="a.other" style="border: 1px solid #000;width: 200px;padding: 10px;margin-bottom: 10px;">
    <h3>开发岗位：{{a.other.kaifa}}</h3>
    <h3>待遇：{{a.other.money}}K</h3>
    <button @click="changeOne">更换工程师</button>&nbsp;
    <button @click="changeTwo">加薪资</button>
  </div>
  <button @click="addOther">添加信息</button>
</template>
<script>
import { reactive } from "vue";
export default {
  name: "Demo",
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    function addOther() {
      a.other = {
        kaifa: "web开发",
        money: 1,
      };
    }
    function changeOne() {
      a.other.kaifa = "java开发";
    }
    function changeTwo() {
      a.other.money++;
    }
    return {
      a,
      addOther,
      changeOne,
      changeTwo,
    };
  },
};
</script>

效果：

可以看到这里的数据是可以进行响应

添加markRaw

<template>
  <h2>姓名：{{a.name}}</h2>
  <div v-if="a.other" style="border: 1px solid #000;width: 200px;padding: 10px;margin-bottom: 10px;">
    <h3>开发岗位：{{a.other.kaifa}}</h3>
    <h3>待遇：{{a.other.money}}K</h3>
    <button @click="changeOne">更换工程师</button>&nbsp;
    <button @click="changeTwo">加薪资</button>
  </div>
  <button @click="addOther">添加信息</button>
</template>
<script>
import { reactive, markRaw } from "vue";
export default {
  name: "Demo",
  setup() {
    let a = reactive({
      name: "NanChen",
      age: 20,
    });
    function addOther() {
      a.other = markRaw({
        kaifa: "web开发",
        money: 1,
      });
    }
    function changeOne() {
      a.other.kaifa = "java开发";
    }
    function changeTwo() {
      a.other.money++;
    }
    return {
      a,
      addOther,
      changeOne,
      changeTwo,
    };
  },
};
</script>

效果：

因为markRaw将{kaifa: “web开发”,money: 1,}变成了一个非响应式对象。因此，当修改 a.other.kaifa 或 a.other.money时，界面不会更新

十六、provide / inject

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用

provide 函数是有两个接受参数,是用来提供和发送数据

provide(name,value)

祖先组件：

import { provide,reactive } from "vue"
export default {
  setup(){
    let obj = reactive（{
        name:'NanChen',
        age:20
    }
    provide('obj',obj)
  }
}

inject则是用来接受数据

后代组件：

import { inject } from "vue"
export default {
  setup(){
    const obj = inject('car')
    return{obj}
  }
}

十七、isRef

判断值是否为ref对象

let name = ref('NanChen')
console.log(isRef(name)); // true

十八、isReactive

判断值是否为isReactive对象

let num = isReactive({})
console.log(isRef(val)); // true

十九、inReadonly

检查对象是否是由readonly创建的只读代理

const state = reactive({
  name: 'NanChen'
})
console.log(isReactive(state)) // true

二十、isProxy

检查对象是否是由reactive或者readonly创建的proxy

const state = reactive({
  name: 'NanChen'
})
console.log(isProxy(state)) // true

Vue2转Vue3快速上手第一篇（共两篇）

一、setup语法

二、ref响应数据

三、reactive创建响应式数据

四、computed 计算属性

五、watch 监听器

例（一）：监听单个ref的响应式数据

例（二）：监听ref定义的多个响应式数据

例（三）：监听reactive所定义的一个响应式数据

例（四）：监听reactive定义的一个响应式数据中的某一个属性

例（五）：监听reactive定义的一个响应式数据中的某些属性

例（六）：监听reactive定义的嵌套对象

六、watchEffect 监听器

七、Vue3生命周期

八、toRef

九、toRefs 响应式转换

十、shallowReactive (浅响应式)

十一、shallowRef 不进行对象响应式

十二、readonly（深只读）

十三、shallowReadonly（浅只读）

十四、toRaw 将响应式对象转换成普通对象

十五、markRaw 永久不响应

不使用markRaw

添加markRaw

十六、provide / inject

十七、isRef

十八、isReactive

十九、inReadonly

二十、isProxy

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Vue2转Vue3快速上手第一篇（共两篇）

一、setup语法

二、ref响应数据

三、reactive创建响应式数据

四、computed 计算属性

五、watch 监听器

例（一）：监听单个ref的响应式数据

例（二）：监听ref定义的多个响应式数据

例（三）：监听reactive所定义的一个响应式数据

例（四）：监听reactive定义的一个响应式数据中的某一个属性

例（五）：监听reactive定义的一个响应式数据中的某些属性

例（六）：监听reactive定义的嵌套对象

六、watchEffect 监听器

七、Vue3生命周期

八、toRef

九、toRefs 响应式转换

十、shallowReactive (浅响应式)

十一、shallowRef 不进行对象响应式

十二、readonly（深只读）

十三、shallowReadonly（浅只读）

十四、toRaw 将响应式对象转换成普通对象

十五、markRaw 永久不响应

不使用markRaw

添加markRaw

十六、provide / inject

十七、isRef

十八、isReactive

十九、inReadonly

二十、isProxy

热门文章

最新文章

相关课程

相关电子书