Vue3

最近在针对vue3进行一些学习，以下是一些个人总结的点

Vue3对于vue2的语法大部分都兼容，也有一些破坏性语法的更新

1. .sync语法移除
2. 过滤器移除
3. 实例方法$on被移除

Vue3中的一些函数

setup函数(入口函数)：只会执行一次

1. 作为Vue中的配置项
2. 在beforeCreate函数之前执行
3. setup中不能使用this，当前this指向undefind

例：

export default {
  setup () {
    console.log('setup执行')
    console.log(this)
  },
  beforeCreate () {
    console.log('beforeCreate执行')
    console.log(this)
  }
}

以下是上方代码的输出结果：

reactive函数

接收一个普通的对象传入，把数据对象转化为响应式对象并返回

例：

// 先引入reactive函数
import {reactive} from 'vue'

// 在函数中调用reactive函数, 并将数据对象传入
setup(){
    const data = reactive({
      name:'小明'
    })
    // 调用完毕后将返回值return出去
    return {
      ...data
    }
  }

ref函数

接收一个简单类型或者复杂类型的传入，并返回一个响应式且可变的ref对象

例：

// 先引入ref函数
import {reactive,ref} from 'vue'

setup(){
    const data = reactive({
      name:'小明'
    })
    const age=ref(18)
    function ageFn(){
    // 要拿到或者更改ref的返回值要在后面.value
    // 模板中使用不需要.value
      age.value=19
    }
    return {
      ...data,age,ageFn
    }
  }

toRefs函数

通过reactive函数处理之后返回的对象，如果这时return时对这个对象结构或者展开，就会发现数据失去响应式的能力，使用toRefs可以保证响应式

例：

	name:{{name}}
    <br>
    list:{{list}}
    <button @click="name='cccc'">click</button>
    {{newList}}

setup(){
    const data=reactive({
      name:'小明'
    })
    const list=ref([1,2,3,4,5,6])
    const newList=computed(()=>{
      return list.value.filter(item=>item>=3)
    })
    return{
      ...toRefs(data),newList,list
    }
  }

computed计算属性

计算属性除语法有些变动之外，特性还是一样

这里偷懒，跟上面toRref代码在一起，这里陈述一下步骤：

1. 引入computed函数
2. setup函数中执行computed函数，传入类型为函数的参数，在这个函数中定义计算公式
3. 把计算属性方法执行的结果返回
   这里是全写形式

const 变量=computed({
    get(){}
    set(val){}
})
return{变量}

watch侦听器

在vue3中，watch接收三个常规参数

1. 第一个参数：函数，返回为要监听变化的数据
2. 第二个参数：函数，响应式数据变化之后执行
3. 第三个参数：对象，在这里配置是否开启深度监听或者立刻执行

<button @click="Mage++">click</button>

setup(){
    const Mage=ref(18)
    // 如果要开始深度监听就在这里添加第三个参数
    // 如果想要监听一个比较深的对象属性,建议直接.具体属性,而不是粗暴的开启深度监听
    watch(
      ()=>{
        return Mage
      },
      ()=>{
        return console.log(Mage.value+'变化了')
      }
    )
    return {
      Mage
    }
  }

---

暂时先总结这些，后续会不定时补充