vue3.0
vue3
vue3
发布日期:   2020-12-06
作者:   宋宇
文章字数:   3.4k
阅读时长:   16 分
阅读次数:  

vue3.0 于 2020 年 9 月 18 日正式发布，与此同时的两周左右 element-ui 也紧随 vue3.0 升级。vue-router4.0 也发布了。

以下是快速的入门掌握

初始化项目

// ① npm i -g @vue/cli
// ② vue create my-project
// ③ npm install @vue/composition-api -S

// ④ main,js
import Vue from "vue";
import VueCompositionApi from "@vue/composition-api";
Vue.use(VueCompositionApi);

setup 方法

setup 是 vue3.x 中新的操作组件属性的方法，它是组件内部暴露出所有的属性和方法的统一 API。

执行时机

setup 的执行时机在：beforeCreate 之后 created 之前

setup(props, ctx) {
    console.log('setup')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },

接受 props 数据

<!-- 组件传值 -->
<com-setup p1="传值给 com-setup"/>
// 通过 setup 函数的第一个形参，接收 props 数据：
setup(props) {
  console.log(props)
},
// 在 props 中定义当前组件允许外界传递过来的参数名称：
props: {
    p1: String
}
/*
{}
p1: "传值给 com-setup"
get p1: ƒ reactiveGetter()
set p1: ƒ reactiveSetter(newVal)
__proto__: Object
*/

context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

setup(props, ctx) {
    console.log(ctx)
    console.log(this) // undefined
  },
/*
attrs: Object
emit: ƒ ()
listeners: Object
parent: VueComponent
refs: Object
root: Vue
...
*/

注意：在 setup() 函数中无法访问到 this

reactive

  • reactive 函数接收一个普通函数，返回一个响应式的数据对象。
    reactive 函数等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象，基本代码示例如下：
<template>
  <div>
    <!-- 在 template 中访问响应式数据 -->
    <p>当前的 count 值为：{{count}}</p>
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
  import { reactive } from "@vue/composition-api";
  export default {
    setup(props, ctx) {
      // 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
      const state = reactive({ count: 0 });
      state.count += 1;
      console.log(state);
      // setup 函数中将响应式数据对象 return 出去，供 template 使用
      return state;
    },
  };
</script>

ref

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：

<template>
  <div>
    <h3>02.ref.vue 文件</h3>
    <p>refCount：{{refCount}}</p>
    <button @click="refCount += 1">+1</button>
  </div>
</template>

<script>
  import { ref } from "@vue/composition-api";
  export default {
    setup() {
      // / 创建响应式数据对象 count，初始值为 0
      const refCount = ref(0);
      // 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以，只有在setup内部才需要 .value 属性
      console.log(refCount.value); // 输出 0
      // 让 refCount 的值 +1
      refCount.value++;
      // 再次打印 refCount 的值
      console.log(refCount.value); // 输出 1
      return {
        refCount,
      };
    },
  };
</script>

在 reactive 对象中访问 ref 创建的响应式数据

当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问，例如：

setup() {
  const refCount = ref(0)
  const state = reactive({refCount})
  console.log(state.refCount) // 输出 0
  state.refCount++ // 此处不需要通过 .value 就能直接访问原始值
  console.log(refCount) // 输出 1
  return {
    refCount
  }
}

【注意：新的 ref 会覆盖旧的 ref，示例代码如下：】

setup() {
  // 创建 ref 并挂载到 reactive 中
  const c1 = ref(0);
  const state = reactive({ c1 });

  // 再次创建 ref，命名为 c2
  const c2 = ref(9);
  // 将 旧 ref c1 替换为 新 ref c2
  state.c1 = c2;
  state.c1++;

  console.log(state.c1); // 输出 10
  console.log(c2.value); // 输出 10
  console.log(c1.value); // 输出 0
}

isRef

isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：

import { ref, reactive, isRef } from "@vue/composition-api";
export default {
  setup() {
    const unwrapped = isRef(foo) ? foo.value : foo;
  },
};

toRefs

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据。

<template>
  <div>
    <h3>03.toRefs.vue文件</h3>
    <p>{{ count }} - {{ name }}</p>
    <button @click="count += 1">+1</button>
    <button @click="add">+1</button>
  </div>
</template>

<script>
  import { reactive, toRefs } from "@vue/composition-api";
  export default {
    setup() {
      // 响应式数据
      const state = reactive({ count: 0, name: "zs" });
      // 方法
      const add = () => {
        state.count += 1;
      };
      return {
        // 非响应式数据
        // ...state,
        // 响应式数据
        ...toRefs(state),
        add,
      };
    },
  };
</script>

computed 计算属性

只读的计算属性

<template>
  <div>
    <h3>04.computed.vue文件</h3>
    <p>refCount: {{ refCount }}</p>
    <p>计算属性的值computedCount : {{ computedCount }}</p>
    <button @click="refCount++">refCount + 1</button>
    <!-- 点击报错 -->
    <button @click="computedCount++">计算属性的值computedCount + 1</button>
  </div>
</template>

<script>
  import { computed, ref } from "@vue/composition-api";
  export default {
    setup() {
      const refCount = ref(1);
      // 只读
      let computedCount = computed(() => refCount.value + 1);
      console.log(computedCount);
      return {
        refCount,
        computedCount,
      };
    },
  };
</script>

可读可写的计算属性

<template>
  <div>
    <h3>04.computed.vue文件</h3>
    <p>refCount: {{ refCount }}</p>
    <p>计算属性的值computedCount : {{ computedCount }}</p>
    <button @click="refCount++">refCount + 1</button>
  </div>
</template>

<script>
  import { computed, ref } from "@vue/composition-api";
  export default {
    setup() {
      const refCount = ref(1);
      // 可读可写
      let computedCount = computed({
        // 取值函数
        get: () => refCount.value + 1,
        // 赋值函数
        set: (val) => {
          refCount.value = refCount.value - 5;
        },
      });
      console.log(computedCount.value);
      // 为计算属性赋值的操作，会触发 set 函数
      computedCount.value = 10;
      console.log(computedCount.value);
      // 触发 set 函数后，count 的值会被更新
      console.log(refCount.value);
      return {
        refCount,
        computedCount,
      };
    },
  };
</script>

watch

watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入：
import { watch } from '@vue/composition-api'

基本用法

<template>
  <div>
    <h3>05.watch.vue文件</h3>
    <p>refCount: {{ refCount }}</p>
  </div>
</template>

<script>
  import { watch, ref } from "@vue/composition-api";
  export default {
    setup() {
      const refCount = ref(100);
      // 定义 watch，只要 count 值变化，就会触发 watch 回调
      // 组件在第一次创建的时候执行一次 watch
      watch(() => console.log(refCount.value), { lazy: false });
      setInterval(() => {
        refCount.value += 2;
      }, 5000);
      return {
        refCount,
      };
    },
  };
</script>

监视数据源

  • 监视 reactive 类型的数据源：
<template>
  <div>
    <h3>05.watch.vue文件</h3>
    <p>count: {{ count }}</p>
    // 不是响应式数据
  </div>
</template>

<script>
  import { watch, ref, reactive } from "@vue/composition-api";
  export default {
    setup() {
      const state = reactive({ count: 100 });
      watch(
        // 监听count
        () => state.count,
        // 如果变换 执行以下函数
        (newVal, oldVala) => {
          console.log(newVal, oldVala);
        },
        { lazy: true }
      );
      setInterval(() => {
        state.count += 2;
      }, 5000);
      return state;
    },
  };
</script>

监视 ref 类型的数据源：

export default {
  setup() {
    // 定义数据源 let count = ref(0); //指定要监视的数据源
    watch(count, (count, prevCount) => {
      console.log(count, prevCount);
    });
    setInterval(() => {
      count.value += 2;
    }, 2000);
    console.log(count.value);
    return { count };
  },
};

监听多个数据源

监视 reactive 类型的数据源：

export default {
  setup() {
    const state = reactive({ count: 100, name: "houfei" });
    watch(
      // 监听count name
      [(() => state.count, () => state.name)],
      // 如果变换 执行以下函数
      ([newCount, newName], [oldCount, oldName]) => {
        console.log(newCount, oldCount);
        console.log(newName, oldName);
      },
      { lazy: true }
    );
    // 在 watch 被创建的时候，不执行回调函数中的代码
    setTimeout(() => {
      state.count += 2;
      state.name = "qweqweewq";
    }, 3000);
    return state;
  },
};

监视 ref 类型的数据源：

export default {
  setup() {
    // 定义数据源
    const count = ref(10);
    const name = ref("zs");
    // 指定要监视的数据源
    watch(
      [count, name],
      ([newCount, newName], [oldCount, oldName]) => {
        console.log(newCount, oldCount);
        console.log(newName, oldName);
      },
      { lazy: true }
    );
    setInterval(() => {
      count.value += 2;
    }, 2000);
    console.log(count.value);
    return {
      count,
    };
  },
};

清除监视

在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下：

// 创建监视，并得到 停止函数
const stop = watch(() => {
  /* ... */
});

// 调用停止函数，清除对应的监视
stop();
<template>
  <div>
    <!-- <h3>05.watch.vue文件</h3> -->
    <p>count: {{ count }}</p>
    <button @click="stopWatch">停止监听</button>
  </div>
</template>

<script>
  import { watch, ref, reactive } from "@vue/composition-api";
  export default {
    setup() {
      // 定义数据源
      const count = ref(10);
      const name = ref("zs");
      // 指定要监视的数据源
      const stop = watch(
        [count, name],
        ([newCount, newName], [oldCount, oldName]) => {
          console.log(newCount, oldCount);
          console.log(newName, oldName);
        },
        { lazy: true }
      );
      setInterval(() => {
        count.value += 2;
        name.value = "houyue";
      }, 2000);
      // 停止监视
      const stopWatch = () => {
        console.log("停止监视，但是数据还在变化");
        stop();
      };
      console.log(count.value);
      return {
        stop,
        count,
        stopWatch,
      };
    },
  };
</script>

在 watch 中清除无效的异步任务

有时候，当被 watch 监视的值发生变化时，或 watch 本身被 stop 之后，我们期望能够清除那些无效的异步任务，此时，watch 回调函数中提供了一个 cleanup registrator function 来执行清除的工作。这个清除函数会在如下情况下被调用：

watch 被重复执行了

watch 被强制 stop 了

Template 中的代码示例如下：

<template>
  <div>
    <!-- <h3>05.watch.vue文件</h3> -->
    <input type="text" v-model="keywords" />
    <p>keywords:--- {{ keywords }}</p>
  </div>
</template>

Script 中的代码示例如下：

import { watch, ref, reactive } from "@vue/composition-api";

export default {
  setup() {
    // 定义响应式数据 keywords
    const keywords = ref("");

    // 异步任务：打印用户输入的关键词
    const asyncPrint = (val) => {
      // 延时 1 秒后打印
      return setTimeout(() => {
        console.log(val);
      }, 1000);
    };

    // 定义 watch 监听
    watch(
      keywords,
      (keywords, prevKeywords, onCleanup) => {
        // 执行异步任务，并得到关闭异步任务的 timerId
        const timerId = asyncPrint(keywords);
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        onCleanup(() => clearTimeout(timerId));
      },
      // watch 刚被创建的时候不执行
      { lazy: true }
    );

    // 把 template 中需要的数据 return 出去
    return {
      keywords,
    };
  },
};

provide & inject 组件传值

provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据。

共享普通数据

app.vue 根组件：

<template>
  <div id="app">
    <h1>父组件</h1>
    <button @click="color = 'blue'">蓝色</button>
    <button @click="color = 'red'">红色</button>
    <button @click="color = 'yellow'">黄色</button>
    <son></son>
    <son></son>
  </div>
</template>

<script>
  import { ref, provide } from "@vue/composition-api";
  import Son from "./components/06.son.vue";

  export default {
    name: "app",
    components: {
      son: Son,
    },
    setup() {
      const color = ref("green");
      provide("themecolor", color);
      return {
        color,
      };
    },
  };
</script>

son.vue son 组件：

<template>
  <div>
    <h3 :style="{ color: color }">son 组件</h3>
    <grandson></grandson>
  </div>
</template>

<script>
  import { inject } from "@vue/composition-api";
  import Grandson from "./07.grandson.vue";
  export default {
    components: {
      grandson: Grandson,
    },
    setup() {
      const color = inject("themecolor");
      return {
        color,
      };
    },
  };
</script>

randson.vue son 组件：

<template>
  <div>
    <h5 :style="{ color: color }">grandson 组件</h5>
  </div>
</template>

<script>
  import { inject } from "@vue/composition-api";
  export default {
    setup() {
      const color = inject("themecolor");
      return {
        color,
      };
    },
  };
</script>

共享 ref 响应式数据

app.vue 根组件

<template>
  <div id="app">
    <h1>父组件</h1>
    <son></son>
  </div>
</template>

<script>
  import { provide } from "@vue/composition-api";
  import Son from "./components/06.son.vue";

  export default {
    name: "app",
    components: {
      son: Son,
    },
    setup() {
      provide("themecolor", "red");
    },
  };
</script>

son.vue son 组件：

<template>
  <div>
    <h3 :style="{ color: color }">son 组件</h3>
    <grandson></grandson>
  </div>
</template>

<script>
  import { inject } from "@vue/composition-api";
  import Grandson from "./07.grandson.vue";
  export default {
    components: {
      grandson: Grandson,
    },
    setup() {
      const color = inject("themecolor");
      return {
        color,
      };
    },
  };
</script>

grandson.vue son 组件：

<template>
  <div>
    <h5 :style="{ color: color }">grandson 组件</h5>
  </div>
</template>

<script>
  import { inject } from "@vue/composition-api";
  export default {
    setup() {
      const color = inject("themecolor");
      return {
        color,
      };
    },
  };
</script>

节点的引用 template ref

dom 的引用

<template>
  <div>
    <h3 ref="h3Ref">TemplateRefOne</h3>
  </div>
</template>

<script>
  import { ref, onMounted } from "@vue/composition-api";

  export default {
    setup() {
      // 创建一个 DOM 引用
      const h3Ref = ref(null);

      // 在 DOM 首次加载完毕之后，才能获取到元素的引用
      onMounted(() => {
        // 为 dom 元素设置字体颜色
        // h3Ref.value 是原生DOM对象
        h3Ref.value.style.color = "red";
      });

      // 把创建的引用 return 出去
      return {
        h3Ref,
      };
    },
  };
</script>

组件的引用

App 父组件：

<template>
  <div id="app">
    <h1>父组件</h1>
    <button @click="showComRef">展示子组件的值</button>
    <son ref="comRef"></son>
  </div>
</template>

<script>
  import Son from "./components/06.son.vue";

  export default {
    name: "app",
    components: {
      son: Son,
    },
    setup() {
      const comRef = ref(null);
      const showComRef = () => {
        console.log(comRef);
        console.log("str1的值是" + comRef.value.str1);
        comRef.value.setStr1();
      };
      return {
        comRef,
        showComRef,
      };
    },
  };
</script>

son.vue 子组件：

<template>
  <div>
    <h3 :style="{ color: color }">son 组件</h3>
    <p>{{ str1 }}</p>
  </div>
</template>

<script>
  import { ref } from "@vue/composition-api";
  export default {
    setup() {
      const str1 = ref("这是一个子组件！！");
      const setStr1 = () => {
        str1.value = "被赋值了";
      };
      return {
        str1,
        setStr1,
      };
    },
  };
</script>

nextTick

<template>
  <div>
    <h3>09.nextTick 组件</h3>
    <p>学习 $nextTick</p>
    <button v-if="isShowInput === false" @click="showInput">展示文本框</button>
    <input type="text" v-else ref="ipt" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShowInput: false,
      };
    },
    methods: {
      showInput() {
        this.isShowInput = !this.isShowInput;
        // console.log(this.$refs)
        this.$nextTick(() => {
          this.$refs.ipt.focus();
        });
      },
    },
  };
</script>

参考

Vue3 的学习记录.pdf
让你 30 分钟快速掌握 vue3.pdf

如果 pdf 挂了，原文在下面

微信公众号文章：
Vue3 的学习记录
让你 30 分钟快速掌握 vue 3

赏

如果你遇到了前端难题，或者需要一对一帮扶服务，请到淘宝搜索店铺：前端在线或扫下面二维码

  转载规则


《vue3.0》由宋宇采用知识共享署名 4.0 国际许可协议进行许可。
  目录