新手教程vue3与vue2写法逐一对比

主要整理内容，vue3真实项目里面，会需要用到的方法api。和和vue2的写法差距在哪里。

import { defineProps, ref, computed, watch, onMounted } from "vue";
vue3 api方法 大多数都需要自己去引入

1、存储 取值

vue2的数据存储，data(){return { 数组，对象，字符串， 数字}}；

vue2的数据取值，this. ***

vue3的数据存储，let dataList = ref({ 这里存数据 }) 简单数据就不需要 {}

vue3的数据取值，dataList._value. *** (ref 里面的数据命名)

2、点击事件

vue2的点击事件，

methods:{
     btn(I){
         console.log("i :>> ", i);
     }  
};

vue3的点击事件，

<script>

    let btn1 = (i) => {
          console.log("i :>> ", i);
    };
</script>

4、组件渲染

vue2的组件渲染，

 <MessageItem/>

import NotifyItem from './components/NotifyItem'
import MessageItem from './components/MessageItem'
import TodoItem from './components/TodoItem'
    export default {
      name: 'MessageContent',
      components: {
        NotifyItem,
        MessageItem,
        TodoItem
      },
      data() {
        return {
          activeName: '',
          notifyNum: '(4)',
          messageNum: '(4)',
          todoNum: '(4)'
        }
      },
   }

vue3的组件渲染，

    <HelloWorld/>  直接用
    
    import HelloWorld from "@/components/HelloWorld.vue";
    

5、父子传值

vue2的父子传值

    父组件
    <HelloWorld :text="text" :list="list" @nt="btn1" />
    
    data() {
    return {
      text: "文字",
      list: [
        { name: "qb", age: 19, gender: "男" },
        { name: "aqb", age: 19, gender: "女" },
      ],
    }
  },
    
  子组件 接
  
    props: {
    showLogo: {
      type: *** ,
      default: ***
    }
  },
  
  子组件 传
  btn(i) {
      this.$emit('方法'，值)
    },
  
  父组件 收
  
  v-on绑定子组件：新生成方法；
  方法（） {
      *** 编程操作
  }

  

vue3的父子传值

    父组件
    <HelloWorld :text="data.text" :list="data.list" @nt="btn1" />
    
    const data = ref({
      text: "文字",
      list: [
        { name: "qb", age: 19, gender: "男" },
        { name: "aqb", age: 19, gender: "女" },
      ],
    });
    
    提问回顾：list怎么在进入页面打印出来，知识点1.
    
    子组件 接
    
    const props = defineProps({
      text: {
        type: String,
        default: "",
      },
      list: {
        type: Array, // 接收的参数类型
        default: [], //默认值
      },
    });
    
    子组件 传
    
    const emit = defineEmits(["btn1"]);

    let btn = (i) => {
          emit("nt", i);
    };

    父组件 接
    
    v-on绑定子组件：新生成方法；
    let btn1 = (i) => {
      console.log("i :>> ", i);
    };
    
    写这个的时候，有点vue2后遗症。vue3 没有methods。
     btn1 (){
          这种写法不行了
      }
    所有的事件操作，一定是 let先定义声明，再去回调函数里面 (() => {}) 做操作

6、computed

vue2 computed的使用

  computed: {
  需要渲染使用的数据
    newList() {
      return 需要操作的数据oldList 做逻辑
    }
  },

vue3 computed的使用

    感觉vue3就是 不停的 ref .value 和先声明
    let objList = computed(() => {
      return props.list.filter((x, i) => {
        return x.name !== "qb";
      });
    });

7、watch

vue2 watch的使用

    watch: {
        ipolist: { //ipolist数据
            handler(newValue, oldValue) {
                console.log('newValue :>> ', newValue);
                console.log('oldValue :>> ', oldValue);
            },
            immediate: true, // 立即执行
            deep: true, // 深度侦听复杂类型内变化
            }
    },

vue3 watch的使用

watch(data._value.list,(newValue,oldValue) => {
  console.log('newValue :>> ', newValue);
  console.log('oldValue :>> ', oldValue);
},{ immediate: true })

watch有个问题，如果监听的是reactive返回的，old修改前的数据初次监听不到。只有ref的可以

补充一句，vue3多了一个watchEffect

个人感觉没啥卵用，节约学习成本，不打算研究了。

简而言之就是，省略了immediate：true。默认直接是true

而watch默认是false

vue3 watchEffect

watchEffect不用写参数，直接写回调函数用

 错
watchEffect(data.value.text,(newValue: any,oldValue: any) => {
  console.log('newValue :>> ', newValue);
  console.log('oldValue :>> ', oldValue);
})

对
watchEffect(() => {
  console.log('newValue :>> ', data.value.text,);
  console.log('oldValue :>> ', data.value.text,);
})

8、生命周期

vue2与vue3生命周期对比

vue2写法	vue3写法
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted