vue3对比vue2

1.vue3中template支持多个根标签
2.main.js
3.setup（取代data methods） ref
4.v-model在组件中的运用
5.新组件 Teleport

main.js

//vue3
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

//vue2
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

createApp(组件)与new Vue({template,render})

setup ref

setup函数返回一个对象，这个对象中包含方法和数据，生命周期钩子函数也在setup中运行，取代的是vue2中的data，methods。
ref类型的数据，是一种响应式的数据,待续

//setup函数有两个参数props和context
export default{
 props:{
    title: String
  },
  setup(props, context) {
   console.log(props.title)

   // Attributes (Non-reactive object)
   console.log(context.attrs)
    // Slots (Non-reactive object)
   console.log(context.slots)
    // Emit Events (Method)
   console.log(context.emit)
  }
}
 

// Vue2
export default{
  props:{
    title: String
  },
  data() {
    return {
      count: 0
    },
  methods:{
    add(){
      return this.count++
    }
  }
}

}

// Vue3
export default {
  props: {
    title: String
  },
  setup(props,context) {
   const count = ref(0)
   add(){
      return count.value ++
    }
  return {count,add}
  }
}

v-model在组件中的运用

vue2组件通信

//子组件
<template>
  <div>
   <p v-if="pVisible">
      For a guide and recipes on how to configure / customize this project      
   </p>
   <div @click="control">切换p标签显示</div>
  </div>
<template>
<script>
export default {
  name: 'children',
  props: {
    pVisible:Boolean
  },
  methods: {
    control(){
      this.$emit('control',!this.pVisible)
    }
  },
}
</script>

//父组件
<template>
  <div >
    <children  :pVisible="isVisible" @control="abc"/>//@control="isVisible=$event"这样也可
  </div>
</template>
<script>
import children from './components/children.vue'
export default {
  name: 'Father',
  data() {
    return {
      isVisible:true
    }
  },
  components: {children},
  methods: {
    abc($event){
      this.isVisible=$event
    }
  },
}
</script>

vue3使用v-model组件通信

//子组件
<template>
   <p v-if="pVisible">
      For a guide and recipes on how to configure / customize this project      
   </p>
   <div @click="control">切换p标签显示</div>
<template>
<script>
export default {
  name: 'children',
  props: {
    pVisible:Boolean
  },
   setup(props,context){
        const control=()=>{
            context.emit('update: pVisible',!props.pVisible)
        }
        return{control}
    }
}
</script>

//父组件
<template>
  <div >
    <children  v-model:pVisible="isVisible" />
  </div>
</template>
<script>
import { ref } from 'vue'
import children from './components/children.vue'
export default {
  name: 'Father',
  components: {children},
  setup(){
    const isVisible=ref(true)
    return{isVisible}
  },
}
</script>

相当于子组件中的pVisible与父组件中的isVisible双向绑定了，比vue2传统方法简化很多。

Teleport
有两个div分别是box1和box2，据经验所知，即使box1的孩子el1的z-index为10，el1的层级也没有box2高，一些情况下el1也会被box2遮住（因为即使el1的层级再高，也是在box1的层级下生存），这时候就可以用teleport组件包住el1，使其脱离box1层级的掌控,to表示重新找的爸爸

<div class="box1" style="position:relative z-index:2">
   <div class="el1" style="position:absolte z-index:10"></div>
</div>
<div class="box2" style="position:relative z-index:3"></div>

//Teleport
<div class="box1" style="position:relative z-index:2">
    <Teleport to="body">
       <div class="el1" style="position:absolte z-index:10"></div>
    </Teleport>
</div>T
<div class="box2" style="position:relative z-index:3"></div>

//待更新。。。