Vue3.X

一、安装 

1.安装命令 npm install -g @vue/cli

2.使用vue-cli命令行创建项目

3.Vue3的新特性：

   1.性能提升【打包小、内存占用小、渲染较快】

    2.Componsition API使组件更易维护

    3.teleport（瞬移组件）

    4.兼容vue2语法

二、知识点

1. 使用defineComponent 构建应用及绑定事件
2. 通过import进行导入

 import  { defineComponent } from "vue"

defineComponent 可以省略 

export default defineComponent ({

 })

 2.使用setup(props,content)父子通信

相当于vue2中的钩子函数 beforeCreate、created,初始化data，methods

在根组件中的components中定义组件，组件的名称建议首字母大写，用法跟vue2中的差不多

import 组件名 from "@/components/组件名"

export default defineComponent ({
   components:{组件名},
 })

组件通信

  父传子：在父组件的子组件的标签上定义自定义属性，子组件中通过props来接收

setup函数接收props作为其第一个参数，props对象是响应式的(单向的父—>子)，watchEffect或watch会观察和响应props的更新。不要对props对象进行解构，那样会失去响应性。在开发过程中，props对象对用户空间代码时不可变的，用户尝试修改props时会触发警告。

案例1:props作为setup的第一个参数

// 父组件 Home.vue
<template>
  <div class="home">
    <About :name="sendData"/>
  </div>
</template>
<script>
  import {ref} from 'vue'; 
  import About from './About'
  export default{
    components:{
      About,
    },
    setup(){
      const sendData = ref('这世界很酷');
      return {
        sendData
      }
    }
  }
</script>

// 子组件About.vue
<template>
  <div class="about">
  {{propContent}}
  </div>
</template>
<script>
  import {watchEffect} from 'vue';
  export default{
    props:{
      name:String
    },
    setup(props){
      let propContent= props.name;
     // watchEffect(()=>{
     //   propContent = props.name
     //})
      return {
        propContent
      }
    }
  }
</script>

     子传父：在子组件中绑定事件，但是我们无法使用this.$emit来接收数据，我们可以通过在setup中传入第二个参数content,通过content.emit("自定义事件名"，参数)来实现

setup(props,content)第二个参数Context上下文对象

<template>
子传父
   <div>
       <button @click="sendF">点击传给父</button>
   </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: '',
  props: {
    
  },
  components: {
    
  },
setup(props,content){
 let sendF=()=>{
    // 在setup中是无法使用this的
    content.emit("save","改变")
 }
return{
   sendF
  }
}
})
</script>

在父组件中绑定事件接收传来的参数  
let save=(arg)=>{
    console.log(arg,"123");
 }

3.使用 ref、toRefs 绑定数据

 ref 参数可以随意传递数据 具有响应式,用于为数据添加响应式状态

 获取数据值得时候需要加value,中途产生的数据使用ref（响应式）

let str = ref ("数据")
str.value()

 

<template>
  <div>
    <p>使用v-model双向数据绑定的数据内容是：{{ msg }}</p>
    <p>
      <!-- 自己实现双向数据绑定，监听input事件，动态修改nmsg的值 -->
      <input type="text" ref="myInput" @input="input" :value="nmsg" />
    </p>
    <p>使用@input事件动态实现双向数据绑定的数据内容是：{{ nmsg }}</p>
    <p>
      <!-- 使用ref方法动态定义并双向绑定hmsg -->
      <input type="text" v-model="hmsg" @input="hmagInpu" />
    </p>
    <p>使用ref方法动态定义并双向数据绑定的数据hmsg是：{{ hmsg }}</p>
    <p>toRefs 来实现在模板中不需要追加 state 调用数据：{{ msg }}</p>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  getCurrentInstance,
  toRefs,
  ref,
  computed,
} from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      msg: "",
      nmsg: "",
      cmsg: computed(() => {
        // 1.计算属性
        return state.msg.length;
      }),
    });

    // 2.可以使用getCurrentInstance hook 来拿到当前实例化对象上下文信息，但是除非极其特殊的情况，否则不建议这样使用
    const { ctx } = getCurrentInstance();
    const input = () => {
      // 在vue3中，因为是面向hooks函数编程，所以，无法通过this拿到当前vue实例化对象
      console.log(ctx.$refs.myInput.value); // 像使用vue2中的this一样，使用ctx（上下文内容信息）
      state.nmsg = ctx.$refs.myInput.value;
    };

    // 3.使用ref方法来定义一个响应式监听的对象，在实际开发中我们都是用这种方法来构建响应式对象
    const hmsg = ref("abc");
    const hmagInpu = () => {
      // 在内部使用hmsg的值，需要使用value来获取对应的值
      console.log("获取到的hmsg值是：" + hmsg.value);
    };

    return {
      // 4.使用toRefs hook方法方便，访问msg不需要使用state.msg，直接msg就可以获取到
      ...toRefs(state),
      hmsg,
      input,
      hmagInpu,
    };
  },
});
</script>

 reactive 具有响应式，初始化数据定义在reactive中，通过return就能被调用

4.监听

先进行导入watch，watch中的第一个参数是监听的数据，参数二是回调

 // 4.watch监听
      //  4.1简单版的      // watch监听只能是 getter/effect 函数、ref、reactive对象或数组
        // watch(state,()=>{
        //   console.log("01-msg新值"+state.msg_text);
        // })
      //   4.2监听指定的信息
        // watch(()=>state.msg_text,(newV,oldV)=>{console.log("01-msg新值是"+newV+"---------旧值是"+oldV)})
      //   4.3监听多个属性（数组形式）
        // watch([() => state.msg_text, () => state.msg2_text], (newVal, oldVal) => {
        //   console.log("02-msg的新值是:" + newVal[1] + "-------旧值是:" + oldVal[1]); // 02-msg的新值是:
        // })
    //   watchEffect 数据发生改变就能触发，程序运行时，初始化就会执行一次；参数中不需要指定监听的属性
         watchEffect(()=>{
           console.log(state.msg_text,"watchEffect");
         })