vue3 reactive ref getCurrentInstance watch 与生命周期 （简单todolist）

<template>
    <div class="user_list">
        <p>{{aa}}</p>
        <p>{{userlist.adddata.name}}</p>
        <p>{{num}}</p>
        <input type="text" v-model="userlist.adddata.name">
        <input type="text" v-model="userlist.adddata.age">
        <button @click="add"> 添加</button> <button @click="numadd">num++</button>
        <ul>
            <li v-for="(item,i) in userlist.list" :key="i">
                {{item.name}}--年龄{{item.age}} 
                <span @click="removeuserlist(i)">删除</span>
            </li>
        </ul>

    </div>
</template>
<script>
import { reactive,ref ,getCurrentInstance,watch,onMounted} from 'vue'
export default{
    data() {
        return {
            aa:"test"
        }
    },
 setup(){
    const { ctx } = getCurrentInstance();
    console.log(ctx)  


    const userlist =reactive({
       list:[],
       adddata:{name:'',age:''}
    })

     const num = ref(1);
     const numadd =()=>{
         num.value++
     }
     
     onMounted(()=>{
       //请求接口
         getdata()
     })
     //监听
     watch(()=>userlist.adddata.name,(value,oldlist)=>{
         console.log(value,oldlist)
     })

    const getdata=()=>{
        setTimeout(() => {
            userlist.list = [{name:"小黄",age:38},{name:"小李",age:58},{name:"辉辉",age:90},{name:"鹏鹏",age:68}]
            // console.log(userlist)
        }, 2000);
     }
     const removeuserlist = (i)=>{
        // console.log(i)
          userlist.list.splice(i,1);  
    }
    //添加
     const add = () =>{
        let obj = Object.assign({},userlist.adddata)
        userlist.list.push(obj)
    }
     return {userlist,removeuserlist,add,numadd,num}
 }
}

</script>

reactive ref

响应式数据，需要使用 ref，其实你也可以使用 reactive 来一次声明多个变量；
reactive 是接收一个普通对象，返回该对象的响应式代理，它等同于 2.x 中的 Vue.observable()。
ref 也是接收一个参数并返回一个响应式且可改变的 ref 对象，一般参数是基础类型，比如数值或字符串等。如果传入的参数是一个对象，将会调用 reactive 方法进行深层响应转换。ref 对象拥有一个指向内部值的单一属性 .value，即当你要访问它的值时，需要 .value 拿到它的值。但是如果是在 setup 中返回且用到模板中时，在 {{}} 里不需要加 .value 访问，在返回时已经自动解套。

//reactive
 const state = reactive({
      count: 0,
      str: 'test'
  })
//ref  需要加上value才能获取
const num = ref(1);
const numadd =()=>{
    num.value++
}

getCurrentInstance

getCurrentInstance 方法获取当前组件实例，然后通过 ctx 属性获取当前上下文，ctx.$router是路由实例，而ctx.$router.currentRoute 就包含当前路由信息。

<script>
import { getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx } = getCurrentInstance()
    console.log(ctx.$router.currentRoute.value)  //当前路径
    //与以前this获取原型上东西一样
    //ctx.$parent  父组件
    // ctx.$nextTick  组件更新完毕  
   // ctx.$store  VueX
  }
}
</script>

watch

watch方法有两个参数，都是函数，第一个函数返回要监听的值，第二个函数是回调函数，它两个参数分别表示新值和旧值。

监听多个值用数组格式

watch(()=>userlist.adddata.name,(value,oldlist)=>{
         console.log(value,oldlist)
   })

监听多个值

watch(()=>[userlist.adddata.name,num.value],([value,newnum],[oldvalue,oldnum])=>{
         console.log( "新值"+ value)
         console.log("老值"+ oldvalue)
         console.log("新数字"+ newnum)
         console.log("旧数字"+ oldnum)
     })

点击数字++ 打印结果

store

api没有改变 创建的时候改变了
创建 vue2 中是使用 new 的方式

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

小例子

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    count: 0
  },
  mutations: {
    ADD (state) {
      state.count++
    }
  },
  actions: {
    add ({ commit }) {
      commit('ADD')
    }
  },
  modules: {
  }
})

<template>
  <div class="home">
    <p>{{count}}</p>
    <button @click="add">增加</button>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    const count = computed(() => store.state.count)

    const add = () => {
      store.dispatch('add')
    }

    return {
      count,
      add
    }
  }
}
</script>

也可以通过

import {getCurrentInstance} from 'vue'

// ...
const store = getCurrentInstance().ctx.$store