computed

data中的属性值变更后会直接渲染到DOM中。

computed则不同，只有第一次调用cpmputed时会执行computed定义的方法，返回值会渲染到模板中。

watch

watch可以监听data中定义的属性值，然后做一些事情。

<template>
  <div class="hello">
      {{fullName}}
      <button @click="setNameFun">click</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '飞',
            lastName: "旋"
        }
    },
    props: {
      msg: String
    },
    methods: {
        setNameFun() {
            this.firstName = "大";
            this.lastName = "熊"
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    },
    watch: {
        firstName(newval,oldval) {
          console.log(newval)
          console.log(oldval)
        }
    }
}
</script>

vue中引入组件

引入组件三步骤

import 要使用的组件，import Editor from '@/components/ComponentDesign/Editor/index'
在 components 对象中声明使用的组件名称


    components: {

        Editor,

        ComponentList,

        AttrList,

        AnimationList,

        EventList,

        Toolbar,

    },

在模板中使用组件 <Toolbar />

向使用的组件传入参数

在此处将使用的组件称作子组件。

首先定义子组件接收的参数：

其次使用子组件传入参数：

使用的组件传出参数到父组件

使用的组件称作子组件，谁使用我们称为父组件。

使用子组件时，通过@handle设置子组件触发父组件的回调函数：

在子组件中，触发父组件设置的回调函数，可以将需要传出的参数传过去：

父组件中的回调函数就可以接收到：

vuex使用

好文 juejin.cn/post/692846…

1.安装vuex npm install vuex

2.main.js引入vuex

import Vuex from 'vuex'

3.定义要管理的全局状态，比如我们定义一个遍历num

var store = new Vuex.store({ state:{ num:88 } })

注入store到vue实例中

4.使用全局变量

当然 this.$store.state.XXX 这样写起来可能会很繁琐。一种简单引用的方式是：

<script>
import { mapState } from 'vuex'; // 从vuex中导入mapState
export default {
    mounted() {
        console.log(this.num);
    },
    computed: {
        ...mapState(['num']), // 经过解构后，自动就添加到了计算属性中，此时就可以直接像访问计算属性一样访问它
    },
}
</script>

vue生命周期钩子

juejin.cn/post/684490…

初始化页面调用ajax放在created 可以访问this.data
渲染dom页面放在 mounted，这个函数之前访问dom会是undefined

vue 常用方法