vue3.0相关

全局API

新的全局api：createApp
调用createApp返回一个应用实例，这是Vue3.0的新概念：
打开src/main.js

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

composition API学习

setup

setup函数是一个新的组件选项。作为组件内使用Composition API的入口点
创建组件实例，然后初始化props，紧接着调用setup函数。它会在beforeCreate钩子之前调用。
setup返回一个对象。则对象的所有属性(它是响应式的数据)都可以直接在模板中使用。相当于vue2.0中data函数返回的对象。
App.vue

<script>
export default {
  setup () {
    return {}
  }
}
</script>

响应式数据

ref：可传入任意类型的值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性.value,改变值的时候必须使用其value属性
reactive:接受一个普通对象然后返回该普通对象的响应式代理。等同于2.x的Vue.obserable()

简写之：reactive负责复杂数据结构，ref可以把基本的数据结构包装成响应式

reactive

<template>
  <div>
    <h2>{{state.count}}</h2>
    <button @click="add">计算</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup(){
    // 响应式变量声明 reactive负责复杂数据结构，
    const state = reactive({
      count: 1
    });
    function add() {
      state.count++;
    }
    return { state, add};
  }
};
</script>

ref

<template>
  <div>
    <h2>{{state.count}}</h2>
    <h3>{{num}}</h3>
    <button @click="add">计算</button>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
export default {

  setup(){
    const state = reactive({
      count: 1
    });
    const num = ref(0);
    function add() {
      state.count++;
      num.value+=2
    }
    return { state, add, num };
  }
};
</script>

ref包装的num,模板里可以直接用，但js中修改的时候操作.value属性。

watch

watch API 完全等效于 2.x this.$watch （以及 watch 中相应的选项）。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。
watch()接收的第一个参数被称作"数据源",它可以是：
一个返回任意值的getter函数
一个包装对象(可以是ref也可以是reactive包装的对象)
一个包含上述两种数据源的数组
第二个参数是回调函数。回调函数只有当数据源发生变动时才会被触发：
1、侦听单个数据源

const state = reactive({count: 1});

//侦听一个reactive定义的数据,修改count值时会触发 watch的回调
watch(()=>state.count,(newCount,oldCount)=>{
  console.log('newCount:',newCount);  
  console.log('oldCount:',oldCount);
})
//侦听一个ref
const num = ref(0);
watch(num,(newNum,oldNum)=>{
  console.log('newNum:',newNum);  
  console.log('oldNum:',oldNum);
})

2、侦听多个数据源(数组)

const state = reactive({count: 1});
const num = ref(0);
// 监听一个数组
watch([()=>state.count,num],([newCount,newNum],[oldCount,oldNum])=>{
  console.log('new:',newCount,newNum);
  console.log('old:',oldCount,oldNum);
})

3、侦听复杂的嵌套对象
我们实际开发中，复杂数据随处可见， 比如：

const state = reactive({
  person: {
    name: '张三',
    fav: ['帅哥','美女','音乐']
  },
});
watch(
  () => state.person,
  (newType, oldType) => {
    console.log("新值:", newType, "老值:", oldType);
  },
  { deep: true }, // 立即监听
);

如果不使用第三个参数deep:true， 是无法监听到数据变化的。 前面我们提到，默认情况下，watch 是惰性的, 那什么情况下不是惰性的， 可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置immediate: true即可
同时，watch和watchEffect在停止侦听，清除副作用(相应地onInvalidate会作为回调的第三个参数传入)等方面行为一致。

<template>
  <div>
    <input type="text"
      v-model="keyword">
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const keyword = ref('')
    const asyncPrint = val => {
      return setTimeout(() => {
        console.log('user input: ', val)
      })
    }

    watch(
      keyword,
      (newVal, oldVal, onCleanUp) => {
        const timer = asyncPrint(keyword)
        onCleanUp(() => clearTimeout(timer))
      },
      {
        lazy: true // 默认false，即初始监听回调函数执行了
      }
    )
    return {
      keyword
    }
  }
}
</script>

作者：前端开发小马哥
链接：https://juejin.cn/post/7057325585705467918
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

作者：前端开发小马哥
链接：https://juejin.cn/post/7057325585705467918
来源：稀土掘金