从0开始vue3.0-一一网

step：

npm install -g @/vue-cli
vue -V
vue create project-name //创建项目，回车选择vue3.0版本
vue add typescript
npm install vue-router@4.0 --save
npm install --save ant-design-vue@next

vue3.0：

1. setup 函数

setup是组合Composition API中的入口函数，也是第一个要使用的函数。
可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)

  beforeCreate() {
    console.log('beforeCreate执行了');
  },
  setup() {
    console.log('setup执行了');
    return {};
  },
  //setup执行了
  //beforeCreate执行了
复制代码

由此可以推断出setup执行的时候,组件对象还没有创建,组件实例对象this还不可用,此时this是undefined, 不能通过this来访问data/computed/methods/props，但methods中可以访问setup提供的属性和方法。

注意：setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板中就不可以使用return中返回对象的数据了。

– setup的参数(props,context)

props： 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性

context：上下文对象，可以通过es6语法解构 setup(props, {attrs, slots, emit})

attrs: 获取当前组件标签上所有没有通过props接收的属性的对象, 相当于 this.$attrs
slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
emit: 用来分发自定义事件的函数, 相当于 this.$emit

演示attrs和props

//父组件
<template>
  <child :msg="msg" msg2='哈哈哈' />
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue';
// 引入子组件
import Child from './components/Child.vue';
export default defineComponent({
  name: 'App',
  components: {
    Child,
  },
  setup() {
    const msg = ref('hello,vue3');
    return {
      msg,
    };
  },
});
</script>

//子组件
<template>
  <h2>子组件</h2>
  <h3>msg:{{ msg }}</h3>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Child',
  props: ['msg'],
  setup(props, {attrs, slots, emit}) {
    console.log('props:', props);//msg: "hello,vue3"
    console.log('attrs:', attrs);//msg2: "哈哈哈"
    return {};
  },
});
</script>
复制代码

演示emit

//父组件
<template>
  <child @click="show" />
</template>

<script lang='ts'>
  setup() {
    const show = () => {
      console.log('name:', 'hzw');
    };
    return {
      show,
    };
  },
</script>

//子组件
<template>
  <button>事件分发</button>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Child',
  setup(props, { emit }) {
    const emitFn = () => {
      emit('show');
    };
    return {
      emitFn,
    };
  },
});
</script>
复制代码

ref

定义一个响应式的数据(一般用来定义一个基本类型的响应式数据Undefined、Null、Boolean、Number和String)

语法

const xxx = ref(initValue):
复制代码

注意：script中操作数据需要使用xxx.value的形式，而模板中不需要添加.value

用一个例子来演示：实现一个按钮,点击可以增加数字

<template>
  <div>{{count}}</div>
  <button @click='updateCount'>增加</button>
</template>
复制代码

在Vue2中

data() {
  return {
    conunt: 0,
  };
},
methods: {
  updateCount() {
    this.conunt++;
  },
},
复制代码

在Vue3中

setup() {
    // ref用于定义一个响应式的数据，返回的是一个Ref对象，对象中有一个value属性
    //如果需要对数据进行操作，需要使用该Ref对象的value属性
    const count = ref(0);
    function updateCount() {
      count.value++;
    }
    return {
      count,
      updateCount,
    };
  },
复制代码

在Vue2中我们通过this.$refs来获取dom节点，Vue3中我们通过ref来获取节点

首先需要在标签上添加ref=’xxx’，然后再setup中定义一个初始值为null的ref类型,名字要和标签的ref属性一致。

注意：一定要在setup的return中返回，不然会报错。

reactive

语法

const proxy = reactive(obj)
复制代码

作用
定义多个数据的响应式，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，响应式转换是“深层的”：会影响对象内部所有嵌套的属性,所有的数据都是响应式的。

代码演示

<template>
  <h3>姓名:{{user.name}}</h3>
  <h3>年龄:{{user.age}}</h3>
  <h3>wife:{{user.wife}}</h3>
  <button @click="updateUser">更新</button>
</template>

 setup() {
    const user = reactive({
      name: 'hzw',
      age: 18,
      wife: {
        name: 'xioaohong',
        age: 18,
        books: ['红宝书', '设计模式', '算法与数据结构'],
      },
    });
    const updateUser = () => {
      user.name = '小红';
      user.age += 2;
      user.wife.books[0] = '金瓶梅';
    };
    return {
      user,
      updateUser,
    };
  },

复制代码

computed函数:

与Vue2中的computed配置功能一致，返回的是一个ref类型的对象

计算属性的函数中如果只传入一个回调函数表示的是get操作

import { computed } from 'vue';
const user = reactive({
  firstName: '韩',
  lastName: '志伟',
});
const fullName1 = computed(() => {
  return user.firstName + user.lastName;
});
return {
  user,
  fullName1,
};
复制代码

计算属性的函数中可以传入一个对象,可以包含set和get函数,进行读取和修改的操作

const fullName2 = computed({
  get() {
    return user.firstName + '_' + user.lastName;
  },
  set(val: string) {
    const names = val.split('_');
    user.firstName = names[0];
    user.lastName = names[1];
  },
});
return {
  user,
  fullName2,
};
复制代码

watch函数:

参数1:要监听的数据
参数2:回调函数
参数3:配置

默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次

通过配置deep为true, 来指定深度监视

import { watch, ref } from 'vue';
const user = reactive({
  firstName: '韩',
  lastName: '志伟',
});
const fullName3 = ref('');
watch(
  user,
  ({ firstName, lastName }) => {
    fullName3.value = firstName + '_' + lastName;
  },
  { immediate: true, deep: true }
);
return {
  user,
  fullName3,
};
复制代码

watchEffect函数:

监视数据发生变化时执行回调，不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据，默认初始时就会执行第一次, 从而可以收集需要监视的数据。

import { watchEffect, ref } from 'vue';
const user = reactive({
  firstName: '韩',
  lastName: '志伟',
});
const fullName4 = ref('');
watchEffect(() => {
  fullName4.value = user.firstName + '_' + user.lastName;
});
return {
  user,
  fullName4,
};
watchEffect可以实现计算属性set方法
watchEffect(() => {
    const names = fullName3.value.split('_');
    user.firstName = names[0];
    user.lastName = names[1];
});
复制代码

生命周期对比:

代码演示

setup() {

  onBeforeMount(() => {
    console.log('--onBeforeMount')
  })

  onMounted(() => {
    console.log('--onMounted')
  })

  onBeforeUpdate(() => {
    console.log('--onBeforeUpdate')
  })

  onUpdated(() => {
    console.log('--onUpdated')
  })

  onBeforeUnmount(() => {
    console.log('--onBeforeUnmount')
  })

  onUnmounted(() => {
    console.log('--onUnmounted')
  })
}
复制代码

toRefs

把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

应用

我们使用reactive创建的对象，如果想在模板中使用，就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。当然小伙伴们可以自行开发更多应用场景。

代码演示

<template>
  <div>
    name:{{name}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  name: '',
  setup() {
    const state = reactive({
      name: 'hzw',
    });
    const state2 = toRefs(state);
    setInterval(() => {
      state.name += '===';
    }, 1000);
    return {
      //通过toRefs返回的对象,解构出来的属性也是响应式的
      ...state2,
    };
  },
});
</script>

复制代码

provide 与 inject

作用
实现跨层级组件(祖孙)间通信

代码演示

父组件

<template>
  <h1>父组件</h1>
  <p>当前颜色: {{color}}</p>
  <button @click="color='red'">红</button>
  <button @click="color='yellow'">黄</button>
  <button @click="color='blue'">蓝</button>
  <hr>
  <Son />
</template>
<script lang="ts">
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'ProvideInject',
  components: {
    Son
  },
  setup() {
    const color = ref('red')
    provide('color', color)
    return {
      color
    }
  }
}
</script>

复制代码

子组件

<template>
  <div>
    <h2>子组件</h2>
    <hr>
    <GrandSon />
  </div>
</template>

<script lang="ts">
import GrandSon from './GrandSon.vue'
export default {
  components: {
    GrandSon
  },
}
</script>

复制代码

孙子组件

<template>
  <h3 :style="{color}">孙子组件: {{color}}</h3>
</template>

<script lang="ts">
import { inject } from 'vue'
export default {
  setup() {
    const color = inject('color')
    return {
      color
    }
  }
}
</script>

复制代码