vue3初识—知识总结

看了视频的总结

视频的总结 前端小野森森-1· 2020-7-10

vue3提供了 composition API

vue3兼容vue2，在vue3中也可以使用vue2的options API

setup函数 

setup 中不能使用 this, this 指向 undefined,setup中默认普通的数据不是响应式的，需要用reactive函数

列举一个简单的例子，可以这样写

<script>
import { ref, watch, reactive, computed } from "vue";

export default {
  setup() {
    const count = ref(0)
    const add = ()=>{
      count.value++
    }
    const decline = ()=>{
      count.value--
    }
    return {
      count,
      add,
      decline
    }
  }
}
</script>

<template>
  <div class="newpage">
    <span style="margin-right:20px">{{count}}</span>
    <button style="margin-right:10px" @click="add">+</button>
    <button @click="decline" style="margin-right:10px">-</button>
  </div>
</template>

<style scoped></style>

也可以把方法拎出来写

<script>
import { ref, watch, reactive, computed } from "vue";
const composition = (count)=>{
  const add = ()=>{
    count.value++
  }
  const decline = ()=>{
    count.value--
  }
  return {
    add,
    decline
  }
}
export default {
  setup() {
    const count = ref(0)
    const {add, decline} = composition(count)
    return {
      count,
      add,
      decline
    }
  }
}
</script>
<template>
  <div class="newpage">
    <span style="margin-right:20px">{{count}}</span>
    <button style="margin-right:10px" @click="add">+</button>
    <button @click="decline" style="margin-right:10px">-</button>
  </div>
</template>

<style scoped></style>

 watch监听  v-model绑定

<script>
import { ref, watch, reactive, computed } from "vue";
const useCompenet = (count)=>{
  const add = ()=>{
    count.value++
  }
  const decline = ()=>{
    count.value--
  }
  return {
    add,
    decline
  }
}
const number = ref(0)
const msg = ref('没修改数据')
let obj = reactive({
  name: '小明在上课'
})
let fzobj = reactive({
  name: '111',
  obj: {
    name: '小东在上课'
  }
})
// 双向监听
watch([number,msg], (newValue, oldValue) => {
console.log("双向new", newValue, "old", oldValue);
})
// 单向监听
watch(number, (newValue, oldValue) => {
  console.log("单向new", newValue, "old", oldValue);
})
// 复杂监听 深度监听且oldValue会展示成和newValue一样
// watch(obj, (newValue, oldValue) => {
//   console.log("复杂new", newValue, "old", oldValue);
// })
// 复杂监听 监听对象的单个属性就不会了
watch(()=>obj.name, (newValue, oldValue) => {
  console.log("复杂new", newValue, "old", oldValue);
})
// 深度监听且oldValue会展示成和newValue一样
// watch(()=>fzobj.obj, (newValue, oldValue) => {
//   console.log("复杂new", newValue, "old", oldValue);
// },{deep:true})
watch(()=>fzobj.obj.name, (newValue, oldValue) => {
  console.log("复杂new", newValue, "old", oldValue);
})

    const visible = ref('');
export default {
  setup() {
    const count = ref(0)
    const {add, decline} = useCompenet(count)
    function changeValue() {
      number.value ++
      msg.value = '修改了数据'
      obj.name = '小明下课了'
      fzobj.obj.name = '小东下课了'
      visible.value = 'value'
    }
    return {
      visible,
      count,
      add,
      decline,
      number,
      changeValue,
      msg,
      obj,
      fzobj
    }
  }
}
</script>

<template>
  <div class="newpage">
    <input type="text" v-model='visible'/>
    <span style="margin-right:20px">{{count}}</span>
    <button style="margin-right:10px" @click="add">+</button>
    <button @click="decline" style="margin-right:10px">-</button>
    <span style="margin-right:10px">{{number}}</span>
    <span style="margin-right:10px">{{msg}}</span>
    <span style="margin-right:10px">{{obj.name}}</span>
    <span style="margin-right:10px">{{fzobj.obj.name}}</span>
    <button @click="changeValue">点击修改</button>
  </div>
</template>

<style scoped></style>

修改前

修改后

点击修改后 输出

也可以在script之间写setup，这样就不用在return了，更方便些

<script setup>
import { ref, watch, reactive, computed } from "vue";
const number = ref(0)
const msg = ref('没修改数据')
const value = reactive({
  name: '威威',
  id: '1'
})
</script>