Vue3 基础第二篇-智码星河

vue3相对vue2：

重写了虚拟Dom实现，编译模板的优化，更高效的组件初始化，undate性能提高1.3~2倍，SSR速度提高了2~3倍，体积减小，组合式api更易维护，更好的Typescript支持，更接近原生，响应式系统升级（2.x使用defineProperty，3.x使用proxy），打包优化...

生命周期

beforeCreated 和 created 这两个钩子是自己写的，需要我们自己调用，在组合式api的写法没有这2个钩子，默认是执行在setup里的，setup执行最早，所以写在setup里的早于其他的钩子，以此来达到created的作用。


<template>

</template>

<script setup>
  import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive } from "vue";

  let beforeCreated = ()=>{
    console.log('beforeCreated');
  }
  beforeCreated();

  let created = ()=>{
    console.log('created,这里可以发请求');
  }
  created();

  onBeforeMount(()=>{
    console.log('onBeforeMount');
  })
  onMounted(()=>{
    console.log('onMounted,这里可以发请求');
  })
  onBeforeUpdate(()=>{
    console.log('onBeforeUpdate');
  })
  onUpdated(()=>{
    console.log('onUpdated');
  })
  onBeforeUnmount(()=>{
    console.log('onBeforeUnmount');
  })
  onUnmounted(()=>{
    console.log('onUnmounted');
  })
</script>


<style scoped>
</style>

计算属性

计算属性只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

<template>
    姓：<input type="text" v-model="person.xing"> <br> <br>
    名：<input type="text" v-model="person.ming"> <br> <br>
    计算：<input type="text" v-model="person.fullname">
</template>

<script setup>
    // 导入计算属性
    import {computed, ref,reactive} from "vue"
    let person = reactive({
        xing:'张',
        ming:'三',
    })
    person.fullname = computed({
        // 读取fullname调用get方法
        get(){
            return person.xing + '-' + person.ming
        },
        // 修改fullname调用set方法 value是修改的值
        set(value){
            console.log("fullname被修改-------",value);
            const nameArr = value.split('-')  //拿到修改的值 张-三 拆分得到数组 姓和名
            person.xing = nameArr[0]  //把拿到的姓赋值
            person.ming = nameArr[1]  //把拿到的名赋值
        }
    })
</script>

<style scoped>
</style>

监听属性


watch('监听的值', (newValue, oldValue) => {
      console.log('监听的值一变化就触发', newValue,oldValue)
})


<template>
  {{nums}}
  <button @click="add1">加一</button>
</template>

<script setup>
  import {ref, watch } from "vue";
  let nums = ref(1)
  let add1 = ()=>{
    console.log("+1");
    nums.value += 1
  }

  watch(nums, (newValue, oldValue) => {
      console.log('watch 已触发', newValue,oldValue)
  })
</script>

<style scoped>
</style>

事件处理程序中可以有多个方法

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

点击一次执行多个方法


<template>
  <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  <button @click="one($event), two($event)">点击</button>
</template>

<script setup>
    let one = ()=>{
      console.log(11);
    }
    let two = ()=>{
      console.log(22);
    }
</script>

<style scoped>
</style>