vue3和vue2的区别及vue3核心语法

一、 vue3和vue2的区别

• api的区别
  vue2：

export default {
    data() {},
    methods:{},
    watch:{},
    mounted() {},
    computed:{},
    filters:{},
    components:{},
    directives:{}
}

vue3

import {ref,computed,onMounted} from 'vue'
setup() {
   const num=ref(0)
   const str=ref('你好！')
   num.value++
   computed(()=>{
          ..........
   })
}

• vue3底层用的typescript语言编写,vue2用JavaScript实现
• vue3双向绑定proxy和vue2(Object.defineProperty)不同
• .......

vue3最初开发的目的：实现代码关注点分离，代码几何级数增长带来的可维护问题

二、vue3核心语法

2.1 组合式api

• ref

  • 通常定义基本类型或数组类型的变量或常量

  • 例如：

    import {ref} from 'vue'
    let num = ref(10);
    let str = ref('hello world')
    let arr = ref([{ id: 1, name: 'jack' }, { id: 2, name: 'alice' }])
    

  • 如何操作dom[通常vue很少操作dom]

    • 给dom定义ref名称

      <button ref="btn" @click="changeValue">修改值</button><
      

    • 定义一个ref常量

      //定义dom操作对象
      const btn = ref(null)
      

    • 然后通过常量.value.style.css属性名

       btn.value.style.width='300px'
      

• reactive

  • reactive主要用于复杂对象类型

  • 例如：

    //定义用户信息
    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
       
    })
    

• toRef

  • 可以将reactive定义的响应式对象中的某个属性单独提取成ref定义的形式

  • 例如：

    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
       
    })
    
    const mingzi=toRef(obj,'username')
    
    模板:
    
    {{ mingzi }}
    

• toRefs

  • 可以将reactive定义的对象属性全部提取出来转换成ref形式

  • 例如：

    //定义用户信息，reactive主要用于复杂对象类型
    const obj = reactive({
      username: '张三',
      age: 20,
      address: '北京',
      hobby: ['音乐', '刷抖音'],
       
    })
    
    //toRefs
    const {username,age,address,hobby}=toRefs(obj)
    

  • computed

    • 可以将ref，reative定义的变量或常量，通过计算属性生成一个新的可响应式的值(ref)

    • 例如：

      //计算属性
      const total = computed(() => {
      
        let res = 0;
        arr.value.forEach(item => {
          res+=item.num
         })
      
        return res
      
      })
      

    通常computed只能读取(默认支持get)，不能修改，如果想修改，必须通过set方式

    例如：

    const fullname = computed({
      get: () => { 
        return firstname.value+lastname.value
      },
      set: (val) => {
        firstname.value = val[0]
        lastname.value=val.slice(1)
      }
    })
    

  • watch

    • 数据改变时，才监听数据的变化

    • 例如：

      //监听ref
      //watch(监听目标,回调)
      watch(firstname, (newV, oldV) => {
        console.log('新值：',newV)
        console.log('旧值:', oldV)
      
      })
      
      //监听reactive
      watch(()=>obj.username, (newV,oldV) => {
         console.log('obj.username新值：',newV)
        console.log('obj.username旧值:', oldV)
      })
      
      

  • watchEffect

    • 进行页面立即触发监听

    • 例如：

      watchEffect(() => {
        console.log('进入立马监听：',firstname.value)
      })
      

  • nextTick

    • 由于数据改变，dom并未更新，如果要拿到dom更新之后的结果，需要通过nextTick来解决
    • 应用场景：
      • 商品列表滚动
      • 数据更新，要对dom做一些操作时使用