【vue.js 3.0】之 Composition API

一、新增 createApp, reactive, onMounted, onUnmounted, toRefs，用这些方法封装函数

• 引入 import { createApp, reactive, onMounted, onUnmounted, toRefs } from './node_modules/vue/dist/vue.esm-browser.js '
• createApp：创建 app
• reactive：实现响应式
• setup：Composition API 的入口

• 生命周期钩子函数 
  
  

  
  
  


  

    x: {{ x }} 

    y: {{ y }}
  
  

二、 reactive-toRefs-ref  这三个函数，创建响应式数据 

ref ：里面的参数是初始数值

  
  
  


  

    按钮
    {{ count }}
  
  

 computed

•  第一种用法
  • watch(() => count.value +1)
• 第二种用法

• demo

  
  
  


  

    按钮
    未完成：{{ activeCount }}
  
  

watch

• watch 的三个参数
  • 第一个参数：要监听的数据
  • 第二个参数：坚挺到数据变化后执行的函数，这个函数有两个参数，分笔试新值和旧值
  • 第三个参数：选项对象，deep 和 immediate 
•  watch 的返回值
  • 取消监听的函数 
• 与 vue 2.x 的区别
  • vue 3.0  watch 的第一个参数不是字符串，而是 ref  或 reacive 返回的对象
  • 使用方法一样

  
  
  


  

    

      请问一个 yes/no 的问题:
      
    
    
{{ answer }}
  

  

 watchEffect

• 是 watch 函数的简化版本，也用来监听数据的变化
• 接收一个函数作为参数，监听函数内响应式数据的变化

  
  
  


  

    increase
    stop
    

    {{ count }}
  

  

Todolist-功能案例

要完成的功能

• 添加待办事项
• 删除待办事项
• 编辑待办事项
  • 双击待办项，展示编辑文本框
  • 按回车挥着编辑文本框失去焦点，修改数据
  • 按 esc 取消编辑
  • 把编辑文本框清空按回车，删除这一项
  • 显示编辑文本框的时候获取焦点
• 切换待办事项
  • 点击 checkbox，改变所有待办项状态
  • All/Active/Complete
  • 其它
    • 显示未完成待办项个数
    • 移除所有完成的项目
    • 如果没有待办项，隐藏 main 和 footer
• 存储待办事项 

demo 源码下载：https://gitee.com/daisy_yangyang/todolist-demo.git