前端系列15集-watch，watchEffect，eventBus

import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  count.value++
}, 1000)

// 定时器注册和销毁
watchEffect((onInvalidate) => {
  const timer = setInterval(()=> {
    // ...
  }, 1000)
  onInvalidate(() => clearInterval(timer))
})

const handleClick = () => {
 // ...
}
// dom的监听和取消监听
onMounted(()=>{
  watchEffect((onInvalidate) => {
    document.querySelector('.btn').addEventListener('click', handleClick, false)
    onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
  })
})

const id = ref(13)
watchEffect(onInvalidate => {
   // 异步请求
  const token = performAsyncOperation(id.value)
  // 如果id频繁改变，会触发失效函数，取消之前的接口请求
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

<el-table-column label="状态" min-width="100">
  {{row.status === 1 ? '已完成' : row.status === 2 ? '进行中' : '未开始'}}
</el-table-column>

<el-table-column label="状态" min-width="100">
  <template #default="{ row }">{{ row.active }}</template>
</el-table-column>

<div v-if="formData.name !== ''">
  <el-form-item label="密码" prop="name">
    <el-input
      class="ls-input"
      v-model="formData.passwd"
      placeholder="请输入密码"
      clearable
    />
  </el-form-item>
</div>

<el-form-item label="密码" prop="name" v-show="formData.name !== ''">
  <el-input
    class="ls-input"
    v-model="formData.passwd"
    placeholder="请输入密码"
    clearable
  />
</el-form-item>

data | 展示数据 |

empty-text | 内容为空的时候展示的文本 |
    
node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 |

render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 |

load 加载子树数据的方法，仅当lazy属性为true时生效

render-content 树节点的内容区的渲染Function

highlight-current 是否高亮当前选中节点，默认值是false

default-expand-all 是否默认展开所有节点

expand-on-click-node
是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

import eventBus from 'vue3-eventbus'
app.use(eventBus)

// Button.vue
import bus from 'vue3-eventbus'
export default {
    setup() {
        bus.emit('foo', { a: 'b' })
    }
}

export default class EventBus {
    constructor() {
     this.event = {}
    }
}

<template>
  <p>计数器：{{ count }}</p>
  <button @click="increment">累加</button>
</template>

<script>
import { ref } fro 'vue'
export default {
  setup () {
    // 打印undefined
    console.log(this)
    // 定义数据和函数
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    // 返回给模板使用
    return { count , increment}
  }
}
</script>

<template>
  <p>计数器：{{ count }}</p>
  <button @click="increment">累加</button>
</template>

<script setup>
import { ref } from 'vue'
// 定义数据和函数
const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<script setup>
import { getCurrentInstance } from 'vue'
// 以下两种方法都可以获取到上下文对象
const { ctx } = getCurrentInstance()
const { proxy }  = getCurrentInstance()
</script>

<template>
  <p>计数器：{{ count }}</p>
  <button @click="increment">累加</button>
</template>

<script setup>
import { ref } from 'vue'
// 创建响应式数据对象
const count = ref(0)
const increment = () => {
  // 在JS中使用的时候需.value
  count.value++
}
</script>

<template>
  <div>
    <p>姓名：{{state.name}}</p>
    <p>年龄：{{state.age}}</p>
    <button @click="addAgeHandle">+1</button>
  </div>
</template>

<script>
import { reactive } from "vue"; 
// 创建响应式数据对象
const state = reactive({ name: 'xxx', age: 25 })
const addAgeHandle = () => {
  state.age++
}
</script>
<template>
  <div>
    <p>姓名：{{state.name}}</p>
    <p>年龄：{{state.age}}</p>
    <button @click="addAgeHandle1">+1</button>
    <button @click="addAgeHandle2">+1</button>
  </div>
</template>

<script>
import { reactive, ref } from "vue"; 
// 创建响应式数据对象
let user1 = reactive({ name: 'xxx', age: 25 })
let user2 = ref({ name: 'xxx', age: 25 })
const addAgeHandle = () => {
  state.age++
}

// 下面是使用的对比
// 💥💥 重新赋值会导致响应式丢失
user1 = {
  name:'xxx',
  age: 123
}

// 👍👍 重新赋值不会导致响应式丢失
user2.value = {
  name:'xxx',
  age: 123
}
</script>

import { ref, reactive, isRef } from 'vue'
const count = ref(1)
const userInfo = reactive({
  name:'xxx',
  age: 18
})
const plusOne = computed(() => count.value + 1)
const plusUserInfo = computed(() => userInfo)
console.log(plusOne.value) // 2
// 也就是说，即使返回值写的是reactive对象，最后也会被转换为响应式的ref对象
console.log(isRef(plusUserInfo)) // true
plusOne.value++ // 错误

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
const count = ref(0)
const user = reactive({
  name:'chengang',
  age: 28
})
// 监听基本数据类型
watch(() => count, (newval, oldval) => {
  console.log(newval, oldval)
})
watch(() => count.value, (newval, oldval) => {
  console.log(newval, oldval)
})
watch(count, (newval, oldval) => {
  console.log(newval, oldval)
})
// 监听复杂数据类型
watch(user, (newval, oldval) => {
  console.log(newval, oldval)
}, { deep: true, immediate: true })
// 监听多个数据
watch([count, user], (newval, oldval) => {
  console.log(newval, oldval)
}, { deep: true})
// 监听对象的属性
watch(() => user.age, (newval, oldval) => {
  console.log(newval, oldval)
})
</script>

<template>
   <!-- 2. 绑定到标签ref属性上,注意：名字要和script定义的保持一致 -->
   <input type="text" ref="inputRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 1. 调用ref函数
const inputRef = ref(null)
const focusHandle = () => {
  inputRef.value.focus()
}
onMounted(() => {
  focusHandle()
})
</script>

<template>
  <Child ref="childRef"/>
  <button @click="handleClick">点击</button>
</template>

<script lang="ts" setup>
import Child from './components/child1.vue'
import { ref } from 'vue'
const childRef =  ref()
const handleClick = () => {
  childRef.value?.countAddHandle()
}
</script>

<template>
  <Child :msg="msg"/>
</template>

<script lang="ts" setup>
import Child from './components/child1.vue'
import { ref } from 'vue'
const msg = ref('hello world')
</script>

<script lang="ts" setup>
import { computed } from 'vue'
// 使用Vue提供的方法增加对类型的声明
import type { PropType } from 'vue'
type User = {
  username: string,
  age: number,
  address: string
}
// 第一种写法
const props = defineProps({
  msg: {
    type: String,
    default:''
  },
  userList: {
    type: Array as PropType<User[]>,
    default: () => []
  },
  userInfo: {
    type: Object as PropType<User>,
    default: () => {}
  }
})
// 第二种写法withDefaults可以赋予prop默认值，但是有一点需要注意的是，类型的声明不能使用d.ts，此为Vue3尚未解决的issur
interface ChildProps {
  foo: string
  userList: User[],
  userInfo: User
}
const props = withDefaults(defineProps<ChildProps>(), {
  foo: '1',
  // 复杂数据类型的默认值需要是函数类型
  userList: () => [
    { username:'admin', age: 18, address:'湖北'}
  ],
  userInfo: () => {
    return { username:'', age: 19, address:''}
  }
})
</script>

<template>
  <Child :count="count" @add-count="count++" @reduce-count="count--" />
</template>

<script lang="ts" setup>
import Child from './components/child1.vue'
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <p>{{  count }}</p>
  <button @click="addHandle">+1</button>
  <button @click="reduceHandle">+1</button>
</template>

<script lang="ts" setup>
// 使用defineEmits的方式1
const emits = defineEmits<{
  // 向上传递参数
  (e:'add-count', value?: number): void,
  (e:'reduce-count'): void
}>()
// 使用defineEmits的方式二
const emits = defineEmits(['add-count', 'reduce-count'])
defineProps({
  count: {
    type: Number,
    default:0
  }
})
// 增加
const addHandle = () => {
  emits('add-count')
}
// 减少
const reduceHandle = () => {
  emits('reduce-count')
}
</script>

<template>
  <p>{{  count }}</p>
  <button @click="addHandle">+1</button>
  <button @click="reduceHandle">+1</button>
</template>

<script lang="ts" setup>
// 使用defineEmits的方式1
const emits = defineEmits<{
  // 向上传递参数
  (e:'add-count', value?: number): void,
  (e:'reduce-count'): void
}>()
// 使用defineEmits的方式二
const emits = defineEmits(['add-count', 'reduce-count'])
defineProps({
  count: {
    type: Number,
    default:0
  }
})
// 增加
const addHandle = () => {
  emits('add-count')
}
// 减少
const reduceHandle = () => {
  emits('reduce-count')
}
</script>

<template>
  <p>{{ name }}</p>
  <p>{{ password }}</p>
  <p>{{ user }}</p>
  <button @click="changeHandle">修改name属性</button>
</template>
  
<script lang="ts" setup>
import { reactive, toRef, toRefs } from 'vue'
const user = reactive({
  name: 'chengang',
  password: 'admin123'
})
// 每次拿出一个
const name = toRef(user, 'name')
// 每次解构对象上全部的属性，可以只取部分
const { password } = toRefs(user)
// 这里特别需要注意：通过toRef/toRefs解构出来的新的响应式对象，值的改变会影响原来的响应式对象，换言之，他俩相互影响
const changeHandle = () => {
  password.value = 'xxxxxxx'
  name.value = 'this is changed'
}
</script>

// utils/mitt.js
import mitt from 'mitt'
import type { Emitter } from 'mitt'
type Events ={
  // 事件名称：传递的参数类型
  change: string
}
const emitter: Emitter<Events> = mitt()
export default emitter

// utils/mitt.ts 
import mitt, { Emitter } from 'mitt'

type Events = { 
    // 事件名称：传递的参数类型 
    change: string 
}

const emitter: Emitter<Events> = mitt()
export default emitter

<template>
  <div class="app">
    <Child1 />
    <Child2 />
  </div>
</template>

<script lang="ts" setup>
import Child1 from './components/child1.vue'
import Child2 from './components/child2.vue'
</script>

<template>
  <button @click="changeHandle">触发修改组件2的msg</button>
</template>

<script lang="ts" setup>
import mitt from '@/utils/mitt'
const changeHandle = () => {
  mitt.emit('change', '这个是组件2需要修改的内容')
}
</script>

<template>
  <p>{{  msg }}</p>
</template>

<script lang="ts" setup>
import mitt from '@/utils/mitt'
import { ref } from 'vue'
const msg =  ref('hello world')
mitt.on('change', (value) => {
  msg.value = value
})
</script>

<input v-model="msg" type="text">
<!-- 等价 -->
<input :value="msg" @input="msg=$event.target.value" type="text">

<Demo v-model="count"></Demo>
<!-- 等价 -->
<Demo :modelValue="count" @update:modelValue="count=$event"></Demo>

<Demo v-model:count1="count1" v-model:count2="count2"></Demo>
<!-- 等价 -->
<Demo :count1="count" @update:count1="count1=$event" :count2="count" @update:count2="count2=$event"></Demo>

<template>
  <div class="app">
    <Child name="name" msg="hello world" demo="123" />
  </div>
</template>

<script lang="ts" setup>
import Child from './components/child.vue'
</script>

<!-- 同一个.vue文件中可以同时书写两个script，一个用来书写setup语法的代码，一个用来使用Options API的属性来增加属性 -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  // 关闭透传
  inheritAttrs: false
})
// export default {
//   inheritAttrs: false
// }
</script>

<template>
  <!-- 在模板中使用通过$attrs即可 -->
  <h1 v-bind="$attrs">透传属性$attrs</h1>
</template>
  
<script lang="ts" setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
// 在setup中使用
console.log(attrs, '在setup中使用')
// 通过v-bind="attrs"将父祖组件传递过来的未经props定义的属性赋给元素或者组件
</script>

<template>
  <div>
   <slot name="header">
    <h1>这里是header的默认内容</h1>
   </slot>
   <!-- default插槽可以写name="default"，也可以不用写，默认都会归纳到default插槽 -->
   <slot name="default">
   </slot>
   <slot name="footer">
   </slot>
  </div>
</template>

<template>
  <div class="app">
    <Child>
      <!-- 具名插槽使用的时候，名称要作用到template上，除非是default -->
      <template #header>
        <p>header的内容</p>
      </template>
      <!-- #和v-slot写法都可以 -->
      <template #default>
       <p>默认的内容</p>
      </template>
      <!-- 或者default插槽直接放内容也可以 -->
      <!-- <p>默认插槽的内容</p> -->
      <!-- #和v-slot写法都可以 -->
      <template v-slot:footer>
        <p>footer的内容</p>
      </template>
    </Child>
  </div>
</template>

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
  <!-- 缩写为 -->
  <template #[dynamicSlotName]>
    ...
  </template>
</base-layout>

<template>
  <div class="app">
    <!-- 这里需要注意一下的是，Vue2的作用域插槽是通过slot-scope="scope"来取值的，但是在Vue3中，是通过v-slot -->
    <!-- 如果是取具名插槽的作用域值，需要使用v-slot:插槽名称="变量名称"，默认插槽是v-slot="变量名称" -->
    <Child6 v-for="item in userList" :user="item" :key="item.username">
      <template v-slot="{ age, username, address }">
        {{ age }} - {{ username }} - {{ address }}
      </template>
    </Child6>
  </div>
</template>

<script lang="ts" setup>
import Child6 from './components/child6.vue'
import { ref } from 'vue'
type User = {
  username: string,
  age: number,
  address: string
}
const userList = ref<User[]>([
  { username: '用户1', age: 24, address: '地址1' },
  { username: '用户2', age: 45, address: '地址2' },
  { username: '用户3', age: 27, address: '地址3' },
])
</script>

<template>
  <div class="child">
    <slot :username="user.username" :age="user.age" :address="user.address"></slot>
    <!-- 全部绑定所有的数据，使用下面的方法 -->
    <!-- <slot v-bind="user"></slot> -->
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
type User = {
  username: string,
  age: number,
  address: string
}
defineProps({
  user: {
    type: Object as PropType<User>,
    default: () => {}
  }
})
</script>

npm install pinia -S

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

app.use(createPinia());
app.mount('#app');

// src/stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

// src/stores/counter.js
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

<script setup>
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
// 以下三种方式都会被 devtools 跟踪
counterStore.count++
counterStore.$patch({ count: counterStore.count + 1 })
counterStore.increment()
</script>

<template>
  <div>{{ counterStore.count }}</div>
  <div>{{ counterStore.doubleCount }}</div>
</template>

npm install prettier eslint eslint-plugin-prettier eslint-config-prettier eslint-define-config --save-dev

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

// @ts-check
const { defineConfig } = require('eslint-define-config');

module.exports = defineConfig({
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "prettier",
  ],
  rules: {
    'vue/script-setup-uses-vars': 'error',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    'vue/custom-event-name-casing': 'off',
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    'space-before-function-paren': 'off',

    'vue/attributes-order': 'off',
    'vue/v-on-event-hyphenation': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/one-component-per-file': 'off',
    'vue/html-closing-bracket-newline': 'off',
    'vue/max-attributes-per-line': 'off',
    'vue/multiline-html-element-content-newline': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'always',
          normal: 'never',
          component: 'always',
        },
        svg: 'always',
        math: 'always',
      },
    ],
  },
});

// prettier.config.js
module.exports = {
 // 一行最多多少个字符
 printWidth: 120,
 // 指定每个缩进级别的空格数
 tabWidth: 2,
 // 使用制表符而不是空格缩进行
 useTabs: true,
 // 在语句末尾是否需要分号
 semi: false,
 // 是否使用单引号
 singleQuote: true,
 // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
 quoteProps: 'as-needed',
 // 在JSX中使用单引号而不是双引号
 jsxSingleQuote: false,
 // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
 trailingComma: 'none',
 // 在对象文字中的括号之间打印空格
 bracketSpacing: true,
 // jsx 标签的反尖括号需要换行
 jsxBracketSameLine: false,
 // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
 arrowParens: 'always',
 // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
 rangeStart: 0,
 rangeEnd: Infinity,
 // 指定要使用的解析器，不需要写文件开头的 @prettier
 requirePragma: false,
 // 不需要自动在文件开头插入 @prettier
 insertPragma: false,
 // 使用默认的折行标准 always\never\preserve
 proseWrap: 'preserve',
 // 指定HTML文件的全局空格敏感度 css\strict\ignore
 htmlWhitespaceSensitivity: 'css',
 // Vue文件脚本和样式标签缩进
 vueIndentScriptAndStyle: false,
 //在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
 //然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
 //对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
 // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
 endOfLine: 'auto'
}

"prettier": "prettier --write ."

npm run prettier

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
     legacy({
         // 需要兼容的目标列表，可以设置多个
         targets: ['defaults', 'ie >= 11', 'chrome >= 52'], 
         additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
         renderLegacyChunks:true,
         // 下面的数组可以自定义添加低版本转换的方法
         polyfills:[
            'es.symbol',
            'es.array.filter',
            'es.promise',
            'es.promise.finally',
            'es/map',
            'es/set',
            'es.array.for-each',
            'es.object.define-properties',
            'es.object.define-property',
            'es.object.get-own-property-descriptor',
            'es.object.get-own-property-descriptors',
            'es.object.keys',
            'es.object.to-string',
            'web.dom-collections.for-each',
            'esnext.global-this',
            'esnext.string.match-all'
        ]
     })
  ]
}