Vue3学习笔记

Vue3学习笔记

1.setup()方法

1.setup()方法的本质就是把return出来的数据分别注入到data和menthods中去

2.setup()方法的执行时机是在beforeCreate（表示组件刚被创建出来，组件的data和methods还没有初始化好）之后。Created（表示组件刚被创建出来，并且组建的data和methods已经初始化好了）之前

1.ref 方法可以智能监听简单的类型的变化，不能监听复杂类型的变化
import {ref} from 'vue';
export default {
  name:'App',
  setup(){
    let num = ref(0)
    function addNum(){
      num.value++
    }
    return {num,addNum}
  },
}
2.监听复杂类型的变化要用到reactive方法
import {reactive} from 'vue';
export default {
  name:'App',
  setup(){
    let num = reactive({
      status:[
        {id:1,name:'zhangsan'},
        {id:2,name:'lisi'},
        {id:3,name:'wangwu'}
      ]
    })
    function deleteNum(index){
      num.status = num.status.filter((item,idx)=> idx !== index);
    }
    return {num,deleteNum}
  },
}
3.升华  抽离思想，业务逻辑融合
import {reactive} from 'vue';
export default {
  name:'App',
  setup(){
    let {num , deleteNum} = todoList(); 
    let {num2 , addNum} = addTodo(num); //可以把变量当成参数传递进来
    return {num,deleteNum}
  },
}
// 此处写在vue实例之外挂载到setup中去。 此处的方法可以写在别的文件中export导出 
function todoList(){
    let num = reactive({
      status:[
        {id:1,name:'zhangsan'},
        {id:2,name:'lisi'},
        {id:3,name:'wangwu'}
      ]
    })
    function deleteNum(index){
      num.status = num.status.filter((item,idx)=> idx !== index);
    }
    return {num,deleteNum}
},