Vue3.0(B站李南江)

1 npm install -g @vue/cli
2 vue create projectName
3 cd projectName
4 npm run serve

git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

// 1. 安装Vite
npm install -g create-vite-app
// 2. 创建Vue3项目
create-vite-app projectName
// 3. 安装依赖运行项目
cd projectName
npm install
npm run dev

<template>
    <div>
        <p>{{ count }}</p>
        <button @click="myFun">按钮</button>
    </div>
</template>

<script>
// ref函数只能监听简单类型的变化，不能监听复杂类型的变化（对象，数组），监听复杂类型引入并使用reactive
import { ref } from ‘vue‘
export default {
  name: ‘App‘,
    // setup 函数是组合api的入口函数,执行时间在beforeCreate和created之间
    setup() {
        // 定义了一个count变量，初始值为0
        // 该变量发生改变后，Vue会自动更新UI
        let count = ref(0)
        // 在组合api中，如果定义方法，不需要定义到methods，直接定义即可
        function myFun() {
            count.value += 1    // 修改值，count.value而不是count
        }
        /**
         * 注意点：
         * 在组合api中定义的变量/方法，要想在外界使用，必须通过return { xxx, xxx } 暴露出去
         */
        return { count, myFun }
    },
}
</script>

<template>
  <div>
    <p>{{time}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
/*
    reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。
    不同的是ref用于基本数据类型，而reactive是用于复杂数据类型，比如对象和数组
*/
// toRefs解构
import { reactive,toRefs } from ‘vue‘
export default {
  name: ‘App‘,
  setup() {
    //   赋值
    let state = reactive({
      time: new Date(),
    })

    function myFn() {
    /*
        reactive中传递的参数必须是json对象或者数组，如果传递了其他对象（比如new Date()），在默认情况下修改对象，
        界面不会自动更新，如果也需要具有响应式，可以通过重新赋值的方式实现
    */
      const newTime = new Date(state.time.getTime())
      newTime.setDate(newTime.getDate() + 1)
      state.time = newTime
      // state.time.setDate(state.time.getDate() + 1) ,页面不更新
      　　console.log(state)    // reactive将传递的对象包装成了proxy对象
    }

    return {
      ...toRefs(state),
      myFn,
    }
  },
}
</script>

import { ref, reactive, isRef, isReactive } from ‘vue‘
export default {
  name: ‘App‘,
    setup() {
        let age = ref(18)
        // let age = reactive({
        　　//      value: 18
        　　// })
        function myFun() {
            console.log(isReactive(age))
            console.log(isRef(age))
            age.value += 2
        }
        return {
            age,
            myFun
        }
    }
}

import { readonly, isReadonly, shallowReadonly } from ‘vue‘
export default {
  name: ‘App‘,
  setup() {
    // 用于创建一个只读的数据，并且是递归只读
    let state = readonly({
      name: ‘lnj‘,
      attr: {
        age: 18,
        height: 1.88,
      },
    })

    function myFn() {
      state.name = ‘知播渔‘
      state.attr.age = 666
      state.attr.height = 1.66
      console.log(state)
      console.log(isReadonly(state))
    }

    return {
      state,
      myFn,
    }
  },
}

<template>
  <div>
    <p>{{ state.a }}</p>
    <p>{{ state.gf.b }}</p>
    <p>{{ state.gf.f.c }}</p>
    <p>{{ state.gf.f.s.d }}</p>
    <button @click="myFun">按钮</button>
  </div>
</template>

<script>
import { ref, shallowRef, triggerRef } from ‘vue‘
export default {
  name: ‘App‘,
    setup() {
      // shallowRef 本质上还是 shallowReative
      // shallowRef(10) -> shallowReactive({ value: 10 })
      // 所以如果是通过 shallowRef 创建的数据，它监听的是 .value 的变化
      let state = shallowRef({
        a: ‘a‘,
        gf: {
          b: ‘b‘,
          f: {
            c: ‘c‘,
            s: {
              d: ‘d‘
            }
          }
        }
      })

      function myFun() {
        /**
         * triggerRef
         * 注意点：
         *  + Vue3 只提供了 triggerRef 方法，没有提供 triggerReactive 方法
         *  + 所以如果是 reactive 类型的数据，那么是无法主动触发界面更新的
         */
        // state.value.a = 1
        // state.value.gf.b = 2
        state.value.gf.f.c = 3
        state.value.gf.f.s.d = 4 // 如果想在修改该数据时，触发界面的更新，可以调用 triggerRef 方法主动触发
        triggerRef(state)

        /**
         * shallowRef
         * 注意点：
         *  + 如果是通过 shallowRef 创建数据，那么 Vue监听的是 .value 的变化，因为底层本质上.value才是第一层
         */
        // state.value = {
        //   a: ‘1‘,
        //   gf: {
        //     b: ‘2‘,
        //     f: {
        //       c: ‘3‘,
        //       s: {
        //         d: ‘4‘
        //       }
        //     }
        //   }
        // }
        console.log(state)
        console.log(state.value.gf)
        console.log(state.value.gf.f)
        console.log(state.value.gf.f.s)
      }

      return {
        state,
        myFun
      }
    }
}

</script>

<template>
  <div>
    <p>{{age}}</p>
    <button @click="myFun">按钮</button>
  </div>
</template>

<script>
  /**
   *  custemRef返回一个 ref 对象，可以显式的控制依赖追踪和触发响应
   */
  import { ref, customRef } from ‘vue‘
  function myRef(value) {
  return customRef((track, trigger) => {
    // track -> 追踪  trigger -> 触发
    return {
      get() {
        track() // 告诉 Vue 这个数据是需要追踪变化的
        console.log(‘get‘, value)
        return value
      },
      set(newValue) {
        console.log(‘set‘, newValue)
        value = newValue
        trigger() // 告诉 Vue 触发界面更新
      }
    }
  })
}

export default {
    name: ‘App‘,
    setup() {
      // let age = ref(18) // reactive({value: 18})
      let age = myRef(18)
      function myFun() {
        age.value += 1
      }
      return { age, myFun }
    }
}
</script>