vue3.0 study

1、 new Vue - > create(vue)

2.0

3.0

2、setup函数是 Composition API（组合API）的入口

<script>
 export default {
  name: 'App',
  setup(){
   let name = '流星'
   let age = 18
   //方法
   function say(){
    console.log(`我叫${name},今年${age}岁`)
   }

   //返回一个对象
   return {
    name,
    age,
    say
   }
  }
 }
</script>
 

兼容vue2的写法如：data，methods

setup可以接受两个参数，第一个参数是props,也就是组件传值，第二个参数是context,上下文对象，context里面还有三个很重要的东西attrs，slots,emit，它们就相当于vue2里面的this.$attrs,this.$slots,this.$emit。

ref

我们写的不是响应式数据，我们写的只是字符串和数字，那怎么变成响应式数据呢，那就呀引入ref，但是如果我们直接在代码里面修改是修改不了的,不如打印一下name和age，你会发现ref把它们变成了对象 并且还是RefImpl的实例对象

```js

作者：迷鹿鱼
链接：https://juejin.cn/post/7030992475271495711
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

其实按道理的话，我们在页面上用的话应该要{{name.value}}显示的，但是因为vue3检测到你是ref对象，它就自动给你.value了
```js
function say(){
  name.value='苒苒'
  age.value=20
}

4、watch

setup(){
    let num=ref('0')
    watch(num,(newValue,oldValue)=>{
      console.log(`当前数字增加了,${newValue},${oldValue}`)
    })
    return {
      num
    }
 监视数组

 watch([num,msg],(newValue,oldValue)=>{
      console.log('当前改变了',newValue,oldValue)
    })