vue3API

.全新的全局API
● createApp()
● defineProperty()
● defineAsyncComponent()
● nextTick()
2.将原来的全局API转移到应用对象
● app.component()
● app.config()
● app.directive()
● app.mount()
● app.unmount()
● app.use()
3.模板语法变化
● v-model的本质变化
○ prop：value -> modelValue；
○ event：input -> update:modelValue；
● .sync修改符已移除, 由v-model代替
● v-if优先v-for解析

案例

<template>
    <div>
      事件：<input type="text" v-model="todo">
      <button @click="addList()"> 添加 </button>
      <ul>
        <li>  {{msg}} </li>
        <li v-for="(item,index) in todoList" @mouseenter="showDelete(true)" @mouseleave="showDelete(false)" :key="index" :class="item.isFinished? 'finished':''">
          <input type="checkbox" :checked="item.isFinished" @click="toFinish(index)">
          {{item.content}}

          <button v-show="isShow" @click="deleteList(index)"> 删除 </button>
        </li>
      </ul>
      <div> 已经完成{{num}}件/总共{{todoList.length}}件 </div>
    </div>
</template>

<script>
import {defineComponent,ref} from "vue";
import {computed, reactive} from "@vue/reactivity";

export default  defineComponent ({
  name: "Todo",
  setup:()=>{
    let isShow = ref(false)
    let todo = ref('123')
    let msg = ref('hello')
    let todoList = reactive([
      {id:1,content:'111',isFinished:false},
      {id:2,content:'222',isFinished:true},
      {id:3,content:'333',isFinished:false},
    ])

    //计算属性
    let num =computed({
      get(){
        return todoList.filter((item)=>{
          return item.isFinished
        }).length
      },
    })

    //添加事件
    function addList(){
      console.log(this)
      console.log(msg)
      this.msg = 'word'
      msg.value = 'word'

      todoList.push({
        id:new Date(),
        content:todo.value,
        isFinished:false
      })

    }
    //删除事件
    function deleteList(index){
      todoList.splice(index,1)
    }

    //完成事件
    function toFinish(index){
      console.log(todoList)
      console.log(index)
      todoList[index].isFinished = !todoList[index].isFinished
    }


    function showDelete(flag){
      console.log(flag)
      if(flag){
        isShow.value = true
      }else{
        isShow.value = false
      }

    }


    return {
      msg,
      todoList,
      addList,
      todo,
      deleteList,
      toFinish,
      num,
      showDelete,
      isShow
    }
  },
})
</script>

<style lang="less" scoped>

li{
  list-style: none;
  border: 1px solid red;
}
.finished{
  text-decoration: line-through ;
}

</style>