15个Vue技巧,你都知道吗

export default {
  name: 'Test',
  props: {
    name: {
      type: String,
    },
    size: {
      type: String,
      validator: s => ['small', 'middle'].includes(s)
    }
  }
};

watch {
  'obj.message.name'() {
    // ...
  }
}

<TableList v-show="isshow" />

<TableList>
  <template #header="attrList">
    <TableHeader v-bind="attrList" />
  </template>
</TableList>

<TableList #header="attrList">
  <TableHeader v-bind="attrList" />
</TableList>

<style scoped>
  .content {
    background: green;
  }
</style>

<style>
  
  .content p {
    font-size: 12px;
  }
</style>
 
<style scoped>
  
  .content {
    background: green;
  }
</style>

<style scoped>
.my-content >>> .child-component {
  font-size: 16px;
}
</style>

<style lang="less" scoped>
.my-content /deep/ .child-component {
  font-size: 16px;
}
</style>

const externalVariable = getValue();
 
export default {
  data() {
    return {
      ReactiveVariable: externalVariable,
    };
  }
};

import { ref } from 'vue';
 
// 可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);   //使用ref使其具有响应性

import { reactive } from 'vue';
 
//  可以完全在 Vue 组件之外完成
const externalVariable = getValue();
// reactive 只对对象和数组起作用
const anotherReactiveVariable = reactive(externalVariable);

import Vue from 'vue'
 
//  可以完全在 Vue 组件之外完成
const externalVariable = getValue();
const anotherReactiveVariable = Vue.observable(externalVariable);

// users: [{name:'leo',id:'1'},{name:'lion',id:'2'}]
<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

<li v-for="(movie, index) in [
  'Lion King',
  'Frozen',
  'The Princess Bride'
]">
  {{ index + 1 }} => {{ movie }}
</li>

<li v-for="(value, key) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ key }}: {{ value }}
</li>

<li v-for="(value, key, index) in {
  name: 'Lion King',
  released: 2019,
  director: 'Jon Favreau',
}">
  {{ index + 1 }} => {{ key }}: {{ value }}
</li>

<template>
  <ul>
    <li v-for="num in 6">Item {{ num }}</li>
  </ul>
</template>

<template>
  <div>
    <h2>{{ title }}</h2>
    <List
      :type="listType"
      :size="listSize"
      :name="listName"
    />
  </div>
</template>

import List from './List';
export default {
  components: { List },
  props: {
    listType: {
      type: String,
      required: true,
    },
    listSize: {
      type: String,
      default: 'medium',
      validator: size => [
        'small',
        'medium',
        'large',
        'x-large'
      ].includes(size),
    },
    listName: {
      type: String,
      default: 'list',
    },
    title: {
      type: String,
      required: true,
    },
  },
};

import List from './List';
export default {
  components: { List },
  props: {
    ...List.props,  // 窃取List的prop，不需要再重复累赘地一一列出
    title: {
      type: String,
      required: true,
    },
  },
};

import List from './List';
 
const listProps = {};
 
Object.entries(List.props).forEach((key, val) => {
  listProps[`list${key.toUpperCase()}`] = val;
});
 
export default {
  components: { List },
  props: {
    ...listProps,
    title: {
      type: String,
      required: true,
    },
  },
};

window.addEventListener('click', e => {
  // 获取被点击的元素
  const currtentEl = e.target;
 
  // 检测在el元素的内部还是外部
  if (el.contains(currtentEl)) {
   // 在el里面点击了
  } else {
   // 在el外面点击了
  }
});

<!-- Parent.vue -->
<template>
  <Child ref="child" />
</template>
 
// 在该组件调用子组件的方法
this.$refs.child.method();

<template>
  <Child
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>
 
// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // Call the method when the trigger is set to `true`
        this.method();
      }
    }
  }
}

export default {
  name: 'namesChange',
  props: {
    names: {
      type: Array,
      required: true,
    },
  },
  watch: {
    names: {
      // 这将让 Vue 知道要在数组内部寻找，如不添加，则不能进行深度监听
      deep: true,
 
      handler(newVal,oldVal)
        console.log('The list of names has changed!');
      }
    }
  }
}

watch(
  names,
  (newVal,oldVal) => {
    console.log('The list of names has changed!');
  },
  {
    deep: true,
  }
);

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <h4 v-if="expanded">
      {{ subheading }}
    </h4>
    <div
      v-if="expanded"
      class="card-content"
    >
      <slot />
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <!-- 将 v-if 提升到分组上 -->
    <template v-if="expanded">
      <h4>
        {{ subheading }}
      </h4>
      <div class="card-content">
        <slot />
      </div>
      <SocialShare />
    </template>
  </div>
</template>

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};
 
// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};