分类： vuejs

• setup 函数的执行时机是在 beforeCreate 和 created 之间;
• 由于 setup 执行时机是在 created 之间，所以组件才刚刚被创建，而 data 和 methods 还没初始化好，所以无法在 setup 中使用 data 和 methods;
• setup中 this 指向 undefined;
• setup 只能是同步的，不能是异步的;

// 首先引入 vue 的 ref 方法
import { ref } from "vue";
const data = ref({a:999})

响应式的主要作用还是有些迷糊，理解的地方是，响应式代表，所有引用到这个数据的程式，都会在该数据发生变化时，作出相应的变化。

不理解的是， const d=def(0) 有必要吗？根据早前的开发经验，const data={a:9} ,运行时在 data 中添加了新的属性，这时无法触发变化，所以需要用到响应式。

vuejs 中 html 标签如果不是标准的 html 标签如(div,span,p,a,…)等等，就会被假定为 vue 组件，然后就会到注册库中寻找该组件，当找不到该组件时就会出错。

有时候我们需要使用一些自定义的标签，但却不是当作组件来用，例如我们想要定义一个 html 标签为 `<uni-head>` ，却不是一个组件，此时，我们只需要在 vue 的忽略配置中加上如下语句，vuejs 就会忽略这个标签了。

Vue.config.ignoredElements = ['uni-head'];

很多时候，我们的子组件作用有所不同，因此我们需要用相同的数据结构，而使用父组件中的方法来进行执行。

它们之间的关系不是很复杂，我们需要进行以下设置，就可以做到了

1.首先，在引用子组件时定义 v-on 属性，假如我们的子组件名称为 am-operation，而父组件也就是当前组件中要给到子组件的方法为parentMethod，那么代码如下

<am-operation v-on:callback="parentMethod"></am-operation>

注意：parentMethod正是父组件中的方法。

2.然后，我们在子组件的模板部分需要调用的地方添加如下代码

<am-button type="success" lagel="提交" @click="childrenMethod( attr1,attr2 )"></am-button>

注意：此处 childrenMethod 为子组件中的方法。

3.最后，我们需要在子组件的 methods 中添加对应的 childrenMethod方法如下

Vue.component('am-menu-operation', {
    // ......
    methods:{
        childrenMethod( attr1,attr2 ){
          this.$emit( 'callback',attr1,attr2 );  
        }
    }
}

注意：重点就在 this.$emit,而callback 正是 v-on：后定义的方法名称

数据

data: function(){
    return {
        a: true,
        b: {
            c:1,
            b:2
        }
    }
}

监测数据 a 的变化

watch: {
   a:function(newValue, oldValue) {
　　　　console.log(newValue)
　　}
},

监测数据 b.c 的变化 ,可以通过 computed 做中间层来指定对象属性

computed: {
    bc() {
        return this.b.c;
  　}
},
watch: {
    bc(newValue, oldValue) {
  　　　　console.log(newValue)
  　　}
},

其它方法，这是 vuejs api 中介绍的方法

// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})