练习vue3.0笔记

vue3.0:官网
参考文章:尚硅谷 Vue3+TS 快速上手

1.常用的api

1. 1.setup: 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 取消了methods和data

  setup(props) {
    if (props.foo === isAbsent) {
      // foo 没有被传入。
    }
  }

	直接使用setup，在里面定义变量，接受两个参数props，context

3. 2.ref : 是一个函数,作用:定义一个响应式的数据,返回来的是一个ref对象 对象中有一个value属性,如果需要做对象进行操作，需要使用ref对象调用value属性的 方式进行操作

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

4. 3.reactive:作用: 定义多个数据的响应式

const obj = reactive({ count: 0 })

const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”：会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

<div class="home">
    <div>ref的使用:{{count}}</div>
    <button @click="updateCount" >增加</button>
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
  </div>
  <div class="home">
    <h3>{{user.name}}</h3>
    <h3>{{user.age}}</h3>
    <h3>{{user.wify}}</h3>
    <h3>{{user.size}}</h3>

    <hr>
    <button @click="updateUser">更新user数据</button>
    <!-- <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
  </div>

import { defineComponent, reactive, ref } from 'vue';   //组合式api都需要引入
 setup(props,context){   
    let count = ref(0)   
    const obj:any = {   //any  ts语法  any代表任何类型
      name:'小米',
      age:20,
      wify:{
        name:'111',
        age:'2222',
        card:[1,2,3]
      }
    }

    const user = reactive<any>(obj) // obj为proxy代理对象，可以实现数据响应
    // let count = 3
    function updateCount(){
      count.value++
    }
    const updateUser = ()=>{    //updateUser   页面中定义的函数
      user.name = "美的"
      user.wify.card[0] = 5
      obj.size=5
      delete obj.age
    }
    return {   //将setup里面定义的函数和方法抛出
      count,
      user,
      updateCount,
      updateUser
    }
  }

以上打稿时间----------------------------------------------------------------2022/5/22