郭_小青
郭_小青

vue3知识点

Vue.js

核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
组件本质上是一个具有预定义选项的实例
const app = vue.createApp({ ... }) // 在应用中创建“全局”组件

// 创建 Vue 应用实例
const app = Vue.createApp(...)

// 定义名为 todo-item 的新组件
app.component('todo-item', {
  template: `
  • This is a todo
    • `
})

// 挂载 Vue 应用
app.mount(...)

    Demo

    const ComponentsApp = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}
// 允许链式写法
// Vue.createApp({})
//  .component('SearchInput', SearchInputComponent)
//  .directive('focus', FocusDirective)
//  .use(LocalePlugin)

const app = Vue.createApp(ComponentsApp)
app.component('todo-item', {
  props: ['todo'],
  template: `
  • {{ todo.text }}
    • `
})
app.mount('#components-app')
    一、根组件
    1. 传递给createApp的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点
    2. *** 根组件与其他组件没有什么不同，配置选项是一样的，所对应的组件实例 行为也是一样的
    3. *** mount 返回的是根组件实例，不是应用本身

    Vue 应用挂载到 

    const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
    二、生命周期
    1. 生命周期函数、选项property(元素属性)或回调上不可使用箭头函数。生命周期钩子this上下文指向调用它的当前活动实例。
    2. 箭头函数并没有this，this作为变量一直向上级词法作用域查找。直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
      vue.createApp({
    data() {
      return { count: 1 }
    },
    created() {
      console.log('count is' + this.count) // => count is 1
    }
  })
    image.png
    三、模板语法

    在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应性系统，Vue能够智能地计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。
    *** v-html不能复合局部模板，因为Vue不是基于字符串的模板引擎，反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位
    *** 动态渲染任意的HTML是非常危险的，因为很容易导致XSS攻击

    1. 文本插值使用双大括号{{ 变量 }}
    2. 动态渲染HTML使用v-html 
      const RenderHtmlApp = {
    data() {
      return {
        rawHtml: '这几个文字是红色'
      }
    }
  }
  Vue.createApp(RenderHtmlApp).mount('#example')

    
  
     v-html解析
    3. 插值双大括号{{ 单个表达式 }}可以使用js表达式
    {{ n + 1 }}
{{ ok ? 'Yes' : 'No' }}
{{ arrayData.split(',') }}
...
{{ var a = 1 }} // 不会生效， 这是语句，不是表达式
{{ if( ok ) { return message } }} // 流控制也不会生效
    4. v- 指令职责是：当表达式的值改变时，将其产生的连带影响，响应式作用于DOM
    5. 参数
     ...
    6. 动态参数

    *** 动态参数预期是求出一个字符串,异常情况下为null。这个null会被显性地用于移除绑定

    // 若attrname的值为click
... 
等价于
...

    *** 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

    
 ...
    7. 缩写

    v-on

    // 完整语法
...
// 缩写
...
// 动态参数缩写
...

    v-bind

    // 完整语法
...
// 缩写
...
// 动态参数缩写
...
    四、Data Property

    vue自动为methods绑定this，以便它始终指向组件实例。这将确保方法再用作事件监听或回调时保持正确的this。定义methods时应避免使用箭头函数

    1. vue没有内置的防抖、节流，可以引用lodash

    为了使组件实例彼此独立，可以在生命周期钩子created里添加防抖函数

    app.component( 'save-button', {
    created() {
      // 使用lodash 防抖函数
      this.debouncedClick = _.debounce(this.click, 500)
    },
    unmounted() {
      // 移除组件时，取消定时器
      this.debouncedClick.cancle()
    },
    methods: {
      click() {
        // ... 响应事件...
      }
    },
    template: `
      
    `
  })
    五、计算属性、侦听器
    1.computed 计算属性

    computed:{ ... }计算属性是基于它们的响应依赖关系缓存的。

    以下：如果data的值不发生改变，即使多次访问computFun计算属性会立即返回之前的计算结果，而不必再次执行函数。如果不希望缓存，可用methods来代替

    computed: {
  computFun() {
    return this.data == 1 ? '是' ：'否'
  }
}

    以下计算属性将不再更新，因为Date.now()不是响应式依赖

      computed: {
    now() {
      return Date.now()
    }
  }
    2.watch 侦听器

    当需要在数据变化时执行异步 或 开销较大的操作时，watch方式最有用

    六、条件渲染

    v-if、v-else-if、v-else、v-show

    1.v-if、v-else-if、v-else

    v-if和v-for不推荐同时使用，如果一起使用了v-if的优先级更高