Web Design Leaves

setup(props, context) {
  //・・・コンポーネントに必要な変数や関数の定義・・・

  return {
    //定義したものを明示的に返す
    //ここで返されるものはコンポーネントの他のオプションで使用可能
  }
}

setup(props, { attrs, slots, emit, expose }) {
  ...
}

const app = Vue.createApp({});
app.component('counter-div', {
  // props オプション（setup の外側で宣言）
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // template オプション（setup の外側で宣言）
  // setup で返されたオブジェクトのプロパティ（count、countUp、countDown）にアクセス
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,

  // setup メソッド内でコンポーネントに必要なものを定義して返す
  setup(props, context) {
    // 引数の props を使ってプロパティにアクセス（ref メソッドでデータをリアクティブに）
    const count = Vue.ref(props.initialCount);
    // 関数を定義（ methods オプションに相当）
    const countUp = () => {
      count.value ++;
    };
    // 関数を定義（ methods オプションに相当）
    const countDown = () => {
      count.value --;
    }
    //定義したものを返すことで、コンポーネントの他のオプションで使用可能になります
    return {
      count,
      countUp,
      countDown
    }
  }
});

app.mount('#app');

return {
  count: count,
  countUp: countUp,
  countDown: countDown
}

const { ref } = Vue;

const counter = ref(0);  // counter は value プロパティを持つオブジェクト

const counter = Vue.ref(0);

console.log(counter) // { value: 0 } オブジェクト（実際には以下のように出力されます）
//RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 0, _value: 0}

//value プロパティを使って変数の値にアクセス
console.log(counter.value) // 0

///value プロパティを使って変数の値を操作（増加）
counter.value++
console.log(counter.value) // 1

const app = Vue.createApp({});
app.component('counter-div', {
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // テンプレートでは count はアンラップされるので count で値にアクセス
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,

  setup(props, context) {
    // 引数の props を使ってプロパティにアクセスし、その値を ref メソッドでリアクティブに
    const count = Vue.ref(props.initialCount);
    const countUp = () => {
      // value プロパティを使って変数の値を操作
      count.value ++;
    };
    const countDown = () => {
      count.value --;
    }
    return {
      count,
      countUp,
      countDown
    }
  }
});
app.mount('#app');

//通常のオブジェクトを受け取り、リアクティブオブジェクトに変換（リアクティブなコピーをす）
const obj = Vue.reactive({
  count: 1,
})

console.log(obj)  // Proxy {count: 1}
obj.count++
console.log(obj.count)  // 2

const app = Vue.createApp({});

app.component('counter-div', {
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // 定義したオブジェクト（state）のプロパティ（count）でアクセス
  template: `<div>Count: {{ state.count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,

  setup(props, context) {
    //reactive メソッドにオブジェクトを渡してリアクティブ化
    const state = Vue.reactive({
      count: props.initialCount,
    });
    const countUp = () => {
      //オブジェクト（state）のプロパティ（count）でアクセス
      state.count ++;
    };
    const countDown = () => {
      state.count --;
    }
    return {
      state,
      countUp,
      countDown
    }
  }
});

const obj = Vue.reactive({
  count: 0,
});

// obj のプロパティ count は ref に変換され、リアクティビティが保たれます
const { count } = Vue.toRefs(obj);

app.component('counter-div', {
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,
  setup(props, context) {
    //reactive メソッドにオブジェクトを渡してリアクティブ化
    const state = Vue.reactive({
      count: props.initialCount,
    });

    // toRefs でオブジェクトの各プロパティを ref に変換し、分割代入で変数 count に代入
    let { count } = Vue.toRefs(state);

    const countUp = () => {
      // count は ref なので .value で値にアクセス
      count.value ++;
    };
    const countDown = () => {
      count.value --;
    }
    return {
      count,  //count を返す
      countUp,
      countDown
    }
  }
});

app.component('counter-div', {
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  //スプレッド構文で展開された count でアクセス
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,
  setup(props, context) {
    //reactive メソッドにオブジェクトを渡してリアクティブ化
    const state = Vue.reactive({
      count: props.initialCount,
    });

    const countUp = () => {
      state.count ++;
    };
    const countDown = () => {
      state.count --;
    }
    return {
      //toRefs でオブジェクトの各プロパティを ref に変換してスプレッド構文を適用
      ...Vue.toRefs(state),
      countUp,
      countDown
    }
  }
});

const obj = Vue.reactive({
  count: 0,
});

// obj のプロパティ count を ref に変換
const count = Vue.toRef(obj, 'count');

const state = Vue.reactive({
  count: props.initialCount,
});

// count はリアクティブではなくなります
let count = state.count; 

setup(props, context) {
  //reactive メソッドにオブジェクトを渡してリアクティブ化
  const state = Vue.reactive({
    count: props.initialCount,
  });

  //プロパティ count を ref として取り出す
  let count = Vue.toRef(state, 'count');

  const countUp = () => {
    // count は ref なので .value で値にアクセス
    count.value ++;
  };
  const countDown = () => {
    count.value --;
  }
  return {
    count,  //count を返す
    countUp,
    countDown
  }
}

const state = Vue.reactive({
  count: props.initialCount,
});

//プロパティ count を ref として取り出す
let count = Vue.toRef(state, 'count');

//toRefs でオブジェクトの各プロパティを ref に変換し、分割代入で変数 count に代入
let { count } = Vue.toRefs(state);

const obj = Vue.reactive({
  count: 0,
});

// obj の存在しないプロパティ foo を ref に変換（空の ref が生成される）
const foo = Vue.toRef(obj, 'foo');

console.log(foo);
//ObjectRefImpl {_object: Proxy, _key: 'foo', _defaultValue: undefined, __v_isRef: true}

const obj = Vue.reactive({
  count: 0,
});

// obj の存在しないプロパティ foo を ref に変換（undefined になる）
let { foo } = Vue.toRefs(obj);

console.log(foo);  //undefined

const app = Vue.createApp({});
app.component('counter-div', {
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // テンプレートでは算出プロパティにアクセスできます
  template: `<div>Count: {{ count }} <br> Count の２倍 : {{ doubleCount }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,

  setup(props, context) {
    //プロパティの値を ref メソッドでリアクティブに
    const count = Vue.ref(props.initialCount);

    const countUp = () => {
      count.value ++;
    };
    const countDown = () => {
      count.value --;
    }
    //computed メソッドを使用して算出プロパティを定義
    const doubleCount = Vue.computed(() => {
      return count.value * 2;
    });

    //算出プロパティの値を変更しようとするとエラーになる（setter を用意すればOK）
    //doubleCount.value = 10; //Write operation failed: computed value is readonly

    return {
      count,
      countUp,
      countDown,
      doubleCount //算出プロパティ
    }
  }
});
app.mount('#app');

<div id="app">
  <counter-div :initial-count="0"></counter-div>
</div>

setup(props, context) {
  //プロパティの値を ref メソッドでリアクティブに
  const count = Vue.ref(props.initialCount);
  const countUp = () => {
    count.value ++;
  };
  const countDown = () => {
    count.value --;
  }
  //computed メソッドを使用して算出プロパティを定義
  const doubleCount = Vue.computed({
    //getter を定義
    get: () => count.value * 2,
    //setter を定義
    set: val => { count.value = val / 2; },
  });

  //算出プロパティの値（value プロパティ経由でアクセス）を変更することができる
  doubleCount.value = 10;
  console.log(count.value); //5

  return {
    count,
    countUp,
    countDown,
    doubleCount //算出プロパティ
  }
}

const app = Vue.createApp({
  data() {
    return {
      myText: ''
    }
  }
});

app.component('custom-input', {
  // modelValue プロパティ
  props: ['modelValue'],
  // emits オプション
  emits: ['update:modelValue'],
  // テンプレートで算出プロパティを v-model としてバインド
  template: `<input v-model="myValue">`,
  // 算出プロパティを定義（modelValue プロパティを操作）
  computed: {
    myValue: {
      // getter
      get() {
        return this.modelValue
      },
      // setter
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
});

app.mount('#app');

<div id="app">
  <custom-input v-model="myText"></custom-input>
  <p>{{ myText }}</p>
</div>

const app = Vue.createApp({
  setup() {
    const myText = Vue.ref('');
    return { myText }
  }
});

app.component('custom-input', {
  // modelValue プロパティ
  props: ['modelValue'],
  // emits オプション
  emits: ['update:modelValue'],
  // テンプレートで算出プロパティを v-model としてバインド
  template: `<input v-model="myValue">`,

  //setup メソッド
  setup(props, context) {
    // 算出プロパティに getter と setter を定義
    const myValue = Vue.computed({
      get() {
        return props.modelValue
      },
      set(value) {
        if(props.modelValue !== value){
          context.emit('update:modelValue', value)
        }
      }
    })

    return {
      myValue
    }
  }
});

app.mount('#app');

//リアクティブな値を定義
const count = Vue.ref(0);

console.log(count.value);  //即座に 0 が出力されるだけ

setTimeout(() => {
  //１秒後に count を１増加（何も起きない）
  count.value++
}, 1000);

//リアクティブな値を定義
const count = Vue.ref(0);

Vue.watchEffect(() => {
  //コールバック関数に含まれるリアクティブ値を検出
  console.log(count.value); //即座に 0 が出力され、1秒後に 1 が出力される
});

setTimeout(() => {
  //リアクティブ値が変化すると watchEffect のコールバック関数が再実行される
  count.value++
}, 1000);

<div id="app">
  <counter-div :initial-count="0"></counter-div>
</div>

const app = Vue.createApp({});

app.component('counter-div', {
  props: ['initialCount'],
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
    </div>
  </div>
  `,

  setup(props, context) {
    //プロパティの値を ref でリアクティブに
    const count = Vue.ref(props.initialCount);
    const countUp = () => {
      count.value ++;
    };
    return {
      count,
      countUp
    }
  }
});
app.mount('#app');

<div id="app">
  <counter-div :initial-count="initialCount"></counter-div>
  <button type="button" v-on:click="init">乱数で初期化</button>
</div>

const app = Vue.createApp({
  setup() {
    //リアクティブな変数（カウントの初期値）を定義（data オプションに相当）
    const initialCount = Vue.ref(0);
    //イベントリスナー（ methods オプションに相当）
    const init = () => {
      //initialCount を乱数でリセット（ref の値には value プロパティ経由でアクセス）
      initialCount.value = Math.floor(Math.random() * 10);
      //console.log(initialCount.value)  //コンソールには出力される
    };
    return {
      initialCount,
      init
    }
  }
});

app.component('counter-div', {
  props: ['initialCount'],
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
    </div>
  </div>
  `,

  setup(props, context) {
    //プロパティの値を ref でリアクティブに
    const count = Vue.ref(props.initialCount);
    const countUp = () => {
      count.value ++;
    };
    return {
      count,
      countUp
    }
  }
});
app.mount('#app');

const app = Vue.createApp({
  setup() {
    //リアクティブな変数（カウントの初期値）を定義（data オプションに相当）
    const initialCount = Vue.ref(0);
    //イベントリスナー（ methods オプションに相当）
    const init = () => {
      //initialCount を乱数でリセット（ref の値には value プロパティ経由でアクセス）
      initialCount.value = Math.floor(Math.random() * 10);
      //console.log(initialCount.value)
    };
    return {
      initialCount,
      init
    }
  }
});

app.component('counter-div', {
  props: ['initialCount'],
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
    </div>
  </div>
  `,

  setup(props, context) {
    //プロパティの値を ref でリアクティブに
    const count = Vue.ref(props.initialCount);

    //カウントの初期値（リアクティブ値）を監視して変更があればコールバック関数を実行
    Vue.watchEffect(() => {
      //props.initialCount が変更されたら count の値を更新
      count.value = props.initialCount;
    })
    const countUp = () => {
      count.value ++;
    };
    return {
      count,
      countUp
    }
  }
});
app.mount('#app');

const stop = watchEffect(() => {
  /* ... */
})

// 監視を停止
stop()

const state = Vue.reactive({ count: 0 });
//値を返す gettter 関数を渡す
Vue.watch(
  () => state.count,  // gettter 関数
  (newValue, oldValue) => {
    /* ...コールバック... */
  }
)

const count = Vue.ref(0);
//直接 ref を渡す
Vue.watch(
  count, // ref
  (newValue, oldValue) => {
  /* ...コールバック... */
})

const obj = reactive({ count: 0 })

// これは、watch() に数値（オブジェクトのプロパティ）を渡しているので動作しません。
Vue.watch(
  obj.count,   //オブジェクトのプロパティを監視できない
  (count) => {
    console.log(`count is: ${count}`)
  }
)

Vue.watch(
  () => obj.count,  // gettter 関数
  (count) => {
    console.log(`count is: ${count}`)
  }
)

//リアクティブなオブジェクトを定義
const obj = Vue.reactive({ count: 0 })

console.log(`count is: ${obj.count}`)  //count is: 0

Vue.watch(
  () => obj.count,  // gettter 関数でオブジェクトのプロパティを監視
  (count) => {
    //第2引数を出力
    console.log(`count is: ${count}`)  //1秒後に count is: 1
  }
)

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

const obj = Vue.reactive({ count: 0 })
console.log(`count is: ${obj.count}`)  //count is: 0

Vue.watch(
  obj,  // リアクティブなオブジェクトを監視
  (obj) => {
    //第2引数のプロパティを出力
    console.log(`count is: ${obj.count}`)  //1秒後に count is: 1
  }
)

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

const firstName = Vue.ref('');
const lastName = Vue.ref('');

Vue.watch([firstName, lastName], (newValues, prevValues) => {
  console.log(newValues, prevValues);
})

firstName.value = 'John'; // logs: ["John", ""] ["", ""]

setTimeout(() => {
  lastName.value = 'Smith'; // logs: ["John", "Smith"] ["John", ""]
}, 100);

const app = Vue.createApp({
  setup() {
    const initialCount = Vue.ref(0);
    const init = () => {
      initialCount.value = Math.floor(Math.random() * 10);
    };
    return {
      initialCount,
      init
    }
  }
});

app.component('counter-div', {
  props: ['initialCount'],
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
    </div>
  </div>
  `,

  setup(props, context) {
    const count = Vue.ref(props.initialCount);

    /* //watchEffect メソッドの場合
    Vue.watchEffect(() => {
      //props.initialCount が変更されたら count の値を更新
      count.value = props.initialCount;
    })
     */

    //上記を watch メソッドで書き換え
    Vue.watch(
      () => props.initialCount, //props.initialCount を監視
      (newValue, prevValue) => {
        //props.initialCount が変更されたら count の値を newValue で更新
        count.value = newValue;
      }
    )

    const countUp = () => {
      count.value ++;
    };

    return {
      count,
      countUp
    }
  }
});
app.mount('#app');

const state = Vue.reactive({
  id: 1,
  attributes: {
    name: ''
  }
});

Vue.watch(
  () => state,
  (newState, prevState) => {
    //実行されない
    console.log('not deep', newState.id, prevState.id);
    console.log('not deep', newState.attributes.name, prevState.attributes.name);
  }
)

Vue.watch(
  () => state,
  (newState, prevState) => {
    console.log('deep', newState.id, prevState.id);
    console.log('deep', newState.attributes.name, prevState.attributes.name);
  },
  { deep: true } //第３引数にオプション deep: true を指定
)

state.id = 7; // ログの出力: "deep" "7" "7"
state.attributes.name = 'Alex' // ログの出力: "deep" "Alex" "Alex"

Vue.watch(
  () => state.id,
  (newState, prevState) => {
    console.log('newState: ' + newState, 'prevState: ' + prevState);
  }
)

Vue.watch(
  () => state.attributes.name,
  (newState, prevState) => {
    console.log('newState: ' + newState, 'prevState: ' + prevState);
  }
)

state.id = 7;  //ログの出力: newState: 7 prevState: 1
state.attributes.name = 'Alex';  //ログの出力: newState: Alex prevState:

Vue.watch(
  () => [state.id, state.attributes.name],
  (newState, prevState) => {
    console.log(newState, prevState);
  }
)

state.id = 7;
state.attributes.name = 'Alex';
//ログの出力: [7, 'Alex'] [1, '']

Vue.watch(
  () => state,
  (newState, prevState) => {
    /* ...コールバック... */
  },
  //第３引数にオプションを指定
  {
    deep: true,
    immediate: true,
    flush: 'post'
  }
)

<div id="app">
  <button v-on:click="onclick">Click</button>
  <p>{{ count }}</p>
</div>

const app = Vue.createApp({
  setup() {
    console.log('setup');

    Vue.onBeforeMount(() => {
      console.log('onBeforeMount hook');
    });
    Vue.onMounted(() => {
      console.log('onMounted hook');
    });
    Vue.onBeforeUpdate(() => {
      console.log('onBeforeUpdate hook');
    });
    Vue.onUpdated(() => {
      console.log('onUpdated hook: count = ' + count.value);
    });
    Vue.onBeforeUnmount(() => {
      console.log('onBeforeUnmount hook');
    });
    Vue.onUnmounted(() => {
      console.log('onUnmounted hook');
    });

    const count = Vue.ref(0);
    const onclick = () => {
      count.value ++;
    };
    return {
      count,
      onclick
    }
  }
});
app.mount('#app');

setTimeout(() => {
  //5秒後にアンマウント
  app.unmount();
},5000);

const app = Vue.createApp({});

app.component('foo-div', {
  //ref 属性に foo を指定
  template: `<div ref="foo">This is Foo.</div>`,
  mounted() {
    //this.$refs.foo で参照
    console.log(this.$refs.foo); //<div>This is Foo.</div> が出力される
    console.log(this.$refs.foo.innerHTML); //This is Foo.
    console.log(this.$refs.foo.localName); //div （タグ名）
  }
});

app.mount('#app');

<div id="app">
  <foo-div></foo-div>
</div>

const app = Vue.createApp({});

app.component('foo-div', {
  //ref 属性 foo を設定
  template: `<div ref="foo">This is Foo.</div>`,

  setup() {
    //ref() を使って ref 属性に指定した名前と同じ名前の変数を定義（$refs.foo に該当）
    const foo = Vue.ref(null);  //または Vue.ref()
    //onMounted ライフサイクルでアクセス
    Vue.onMounted(() => {
      // .value プロパティでアクセス（foo は ref オブジェクト）
      console.log(foo.value);  //<div>This is Foo.</div> が出力される
      console.log(foo.value.innerHTML);  //This is Foo.
      console.log(foo.value.localName);  //div
    });
    //ref メソッドで定義した変数（ref オブジェクト）を返す
    return {
      foo
    }
  }
});

app.mount('#app');

<div id="app">
  <!-- それぞれに ref 属性を指定 -->
  <p ref="hello">hello</p>
  <bar-div ref="bar" class="child"></bar-div>
</div>

const app = Vue.createApp({
  setup() {
    //要素の参照を保持する ref を宣言（名前はテンプレートの ref 属性の値に一致させる）
    const hello = Vue.ref();  //hello は ref オブジェクト
    const bar = Vue.ref();  //bar は ref オブジェクト
    //onMounted ライフサイクルフックで参照先の情報を出力
    Vue.onMounted(() => {
      //ref オブジェクトの value プロパティにアクセス
      console.log(hello.value);  //<p>hello</p>
      console.log(hello.value.innerHTML);  //hello
      console.log(bar.value);  //Proxy {…} 子コンポーネントのインスタンス
      console.log(bar.value.message);  //This is Bar.
      console.log(bar.value.onclick);  //() => { alert('Bar'); } メソッド
      console.log(bar.value.$attrs);  //Proxy {class: 'child', __vInternal: 1}
      console.log(bar.value.$attrs.class);  //child
    });
    // ref をテンプレートに公開
    return {
      hello,
      bar,
    };
  },
});

//子コンポーネント
app.component('bar-div', {
  template: `<div class="bar" v-on:click="onclick">{{ message }}</div>`,
  setup() {
    //データ
    const message = 'This is Bar.';
    //メソッド
    const onclick = () => {
      alert('Bar');
    }
    //上記データとメソッドを公開
    return {
      message,
      onclick
    }
  }
});
app.mount('#app');

<div id="app">
  <!-- 子コンポーネントの ref 属性に childRef を付与 -->
  <child-div ref="childRef" message="Foo!"></child-div>
  <button type="button" v-on:click="handleClick">childFunc を呼び出す</button>
</div>

//親コンポーネント
const app = Vue.createApp({
  setup() {
    //ref 属性に指定した値と同じ名前の変数を宣言して ref メソッドで初期化
    const childRef = Vue.ref(null);  //または Vue.ref()
    // 子コンポーネントのメソッドを発火させるメソッドを定義
    const handleClick = () => {
      // 子コンポーネントで公開されているメソッドを呼び出す
      childRef.value.childFunc();
      //以下のメソッドは公開されていないので使用するとエラーになる
      //childRef.value.childOnlyFunc();
    };
    // テンプレートに公開
    return {
      childRef,
      handleClick,
    };
  },
});

//子コンポーネント
app.component('child-div', {
  // props オプション
  props: {
    message : {
      type: String,
      default: 'World!'
    }
  },

  template: `<div>Hello {{ message }}</div>`,

  setup(props, context) {
    // 公開するメソッドの定義
    const childFunc = () => {
      console.log("childFunc: props の値は " + props.message);
    };
    // 非公開のメソッドの定義
    const childOnlyFunc = () => {
      console.log("非公開のメソッド ");
    };

    // context.expose で childFunc メソッドを外部コンポーネントに公開
    context.expose({
      childFunc
    });

    return {
      childFunc,
      childOnlyFunc
    }
  }
});

setup(props, { expose }) {
  const childFunc = () => {
    console.log("childFunc: props の値は " + props.message);
  };
  const childOnlyFunc = () => {
    console.log("非公開のメソッド ");
  };
  // expose で childFunc メソッドを外部コンポーネントに公開
  expose({
    childFunc
  });
  return {
    childFunc,
    childOnlyFunc
  }
}

<div id="app" data-v-app="">
  <div>Hello Foo!</div>
  <button type="button">childFunc を呼び出す</button>
</div>

const app = Vue.createApp({});

app.component('parent-div', {
  template: `
    <div id="parent">
      <input v-model="title">
      <foo-div />
    </div>`,
  data() {
    return {
      title: 'Vue3'
    }
  },
  //値を提供（provide オプション）
  provide() {
    return {
      //computed メソッド でリアクティブに
      title: Vue.computed(() => this.title)
    }
  }
}).component('foo-div', {
  template: `
    <div id="foo">
      <child-div />
    </div>`
}).component('child-div', {
  template: `
    <div id="child">
      child: {{ title.value }}
    </div>`,
  //値を注入（inject オプション）
  inject: ['title'],
});

app.mount('#app'); 

<div id="app">
  <parent-div />
</div>

const app = Vue.createApp({});

app.component('parent-div', {
  template: `
    <div id="parent">
      <input v-model="title">
      <foo-div />
    </div>`,
  setup() {
    //提供する値をリアクティブに
    const title = Vue.ref('Vue3');
    //provide メソッドで値を登録
    Vue.provide('title', title);
    return {
      title
    };
  },
}).component('foo-div', {
  template: `
    <div id="foo">
      <child-div />
    </div>`
}).component('child-div', {
  template: `
    <div id="child">
      child: {{ title }}
    </div>`,
  setup() {
    //inject メソッドで登録された値を取得
    const title = Vue.inject('title');
    return {
      title
    };
  }
});

app.mount('#app');

// 静的な値を提供
Vue.provide('foo', 'bar')

// リアクティブな値を提供
const count = Vue.ref(0)
Vue.provide('count', count)

const title = Vue.inject('title', '既定値');

const app = Vue.createApp({});

app.component('parent-div', {
  template: `
    <div id="parent">
      <input v-model="obj.title">
      <foo-div />
    </div>`,
  setup() {
    //reactive メソッドを使ってリアクティブに
    const obj = Vue.reactive({
      title: 'Object Title'
    });
    //オブジェクトで提供
    Vue.provide('obj', obj);
    return {
      obj
    };
  },
}).component('foo-div', {
  template: `
    <div id="foo">
      <child-div />
    </div>`
}).component('child-div', {
  template: `
    <div id="child">
      child: {{ obj.title }}
    </div>`,
  setup() {
    const obj = Vue.inject('obj');
    return {
      obj
    };
  }
});

app.mount('#app');

const app = Vue.createApp({});

app.component('parent-div', {
  template: `
    <div id="parent">
      <input v-model="title">
      <foo-div />
    </div>`,
    setup() {
    const title = Vue.ref('Vue3');
    //更新メソッドを提供
    const updateTitle = () => {
      title.value = 'New Title'
    };
    Vue.provide('title', title);
    //provide メソッドで更新メソッドを登録
    Vue.provide('updateTitle', updateTitle);
    return {
      title
    };
  },
}).component('foo-div', {
  template: `
    <div id="foo">
      <child-div />
    </div>`
}).component('child-div', {
  template: `
    <div id="child">
      <p>child: {{ title }}</p>
      <button  v-on:click="updateTitle">タイトル更新</button>
    </div>`,
  setup() {
    const title = Vue.inject('title');
    //更新メソッドを注入
    const updateTitle = Vue.inject('updateTitle');
    return {
      title,
      updateTitle
    };
  }
});

app.mount('#app');

const app = Vue.createApp({});

app.component('parent-div', {
  template: `
    <div id="parent">
      <foo-div />
    </div>`,
    setup() {
    const title = Vue.ref('Vue3');
    //readonly メソッドで値を読み取り専用に
    Vue.provide('title', Vue.readonly(title));
    return {
      title
    };
  },
}).component('foo-div', {
  template: `
    <div id="foo">
      <child-div />
    </div>`
}).component('child-div', {
  template: `
    <div id="child">
      <p>child: {{ title }}</p>
      <button  v-on:click="title='child で変更'">タイトル変更</button>
    </div>`,
  setup() {
    const title = Vue.inject('title');
    return {
      title
    };
  }
});

app.mount('#app');

<div id="app">
  <counter-div v-bind:initial-count="0"></counter-div>
</div>

const app = Vue.createApp({});
app.component('counter-div', {
  // props オプション
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // template オプション
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,
  // setup メソッド内でコンポーネントに必要なものを定義
  setup(props, context) {
    // データオブジェクトの宣言
    const count = Vue.ref(props.initialCount);
    // イベントリスナー（メソッド）の定義
    const countUp = () => {
      count.value ++;
    };
    // イベントリスナー（メソッド）の定義
    const countDown = () => {
      count.value --;
    }
    // 定義したものをまとめて戻り値にして返す
    return {
      count,
      countUp,
      countDown
    }
  }
});
app.mount('#app');

//切り出したカウンターのためのロジック（コンポーザブル関数）
const useCounter = (initialCount) => {
  //カウンターで使用する変数（データオブジェクト）
  const count = Vue.ref(initialCount);
  //カウンターで使用するメソッド
  const countUp = () => {
    count.value ++;
  };
  //カウンターで使用するメソッド
  const countDown = () => {
    count.value --;
  }
  //カウンターで使用するオブジェクト（変数とメソッド）を返す
  return {
    count,
    countUp,
    countDown
  }
}

//コンポーザブル関数を利用するコンポーネント
const app = Vue.createApp({});
app.component('counter-div', {
  // props オプション （同じ）
  props: {
    initialCount : {
      type: Number,
      default: 1
    }
  },
  // template オプション （同じ）
  template: `<div>Count: {{ count }}
    <div>
      <button type="button" v-on:click="countUp">Increase</button>
      <button type="button" v-on:click="countDown">Decrease</button>
    </div>
  </div>
  `,
  // setup メソッド
  setup(props, context) {
    //コンポーザブル関数（useCounter）を呼び出し、その結果を変数に代入（分割代入）
    const {count, countUp, countDown } = useCounter(props.initialCount);
    //この例では単にコンポーザブル関数の結果を setup の戻り値に
    return {
      count,
      countUp,
      countDown
    }
  }
});
app.mount('#app');

setup(props, context) {
  return {
    ...useCounter(props.initialCount)
  }
}

directive(name, definition)

const app = Vue.createApp({});
app.component('focused-input', {
  template: `<input v-focus />`,
  // directives オプション（ローカルディレクティブの定義）
  directives: {
    //ディレクティブの名前
    focus: {
      //ディレクティブの定義オブジェクト（
      mounted(el) {
        el.focus()
      }
    }
  }
});
app.mount('#app');

<div id="app">
  <focused-input />
</div>

<elem v-my-directive:引数="ディレクティブの値">

const app = Vue.createApp({
  data() {
    return {
      myColor: 'green',
    }
  }
}).directive('color', {
  mounted(el, binding) {
    // binding.arg はディレクティブに渡した引数
    const prop = binding.arg || 'color';
    el.style[prop]=binding.value;
  }
});
app.mount('#app');

<div id="app">
  <div v-color:background-color="myColor">Background is green.</div><!--背景色が緑-->
  <div v-color="myColor">Text is green.</div><!-- 文字色が緑 -->
</div>

const app = Vue.createApp({
  data() {
    return {
      myColor: 'green',
    }
  }
}).directive('color', {
  mounted(el, binding) {
    //引数の値に応じて色を付ける
    switch(binding.arg) {
      case 'background':
        el.style.backgroundColor = binding.value;
        break;
      case 'border':
        el.style.borderStyle = 'solid';
        el.style.borderWidth = '1px';
        el.style.borderColor = binding.value;
        break;
      case 'text':
        el.style.color = binding.value;
        break;
      default:
        //引数が省略されたり、値が無効な場合
        el.style.color = binding.value;
    }
  }
});
app.mount('#app');

<div id="app">
  <div v-color:border="myColor">Hello!</div><!--緑のボーダー-->
  <div v-color:background="'yellow'">Hello!</div><!--黄色の背景色 -->
</div>

<div id="app">
  <p v-pin:[direction]="pinPadding">
    {{ pinPadding }}px from the {{ direction || 'top' }}
  </p>
</div>

const app = Vue.createApp({
  data() {
    return {
      direction: 'right', //ディレクティブの引数
      pinPadding: 200 //ディレクティブの値
    }
  }
}).directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    // binding.arg はディレクティブに渡した引数
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
});
app.mount('#app');

<div id="app">
  <input type="range" min="0" max="500" v-model="pinPadding">
  <select v-model="direction">
    <option value="top">top</option>
    <option value="right">right</option>
    <option value="bottom">bottom</option>
    <option value="left">left</option>
  </select>
  <p v-pin:[direction]="pinPadding">
    {{ pinPadding }}px from the {{ direction || 'top' }}
  </p>
</div>

const app = Vue.createApp({
  data() {
    return {
      direction: 'right',
      pinPadding: 200
    }
  }
}).directive('pin', {
  //マウントされた時に一度だけ呼び出される
  mounted(el, binding) {
    el.style.position = 'fixed'
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
});
app.mount('#app');

const app = Vue.createApp({
  data() {
    return {
      direction: 'right',
      pinPadding: 200
    }
  }
}).directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed';
    const s = binding.arg || 'top';
    el.style[s] = binding.value + 'px';
  },
  //update フック関数を定義（更新を検知）
  updated(el, binding) {
    //位置の指定を初期化
    el.style.top = null;
    el.style.right = null;
    el.style.bottom = null;
    el.style.left = null;
    const s = binding.arg;
    el.style[s] = binding.value + 'px';
  }
});
app.mount('#app');

const app = Vue.createApp({
  data() {
    return {
       myColor: 'green'
    }
  }
}).directive('text-color', {
  mounted(el, binding) {
    el.style.color = binding.value;
    //修飾子 italic が指定されていれば
    if(binding.modifiers.italic) {
      el.style.fontStyle = 'italic';
    }
    //修飾子 bold が指定されていれば
    if(binding.modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
    //修飾子 underline が指定されていれば
    if(binding.modifiers.underline) {
      el.style.textDecoration = 'underline';
    }
  }
});
app.mount('#app');

<div id="app">
  <div v-text-color.italic="myColor">Hello!</div> <!-- 緑色で斜体 -->
  <div v-text-color.bold="myColor">Hello!</div> <!-- 緑色で太字 -->
  <div v-text-color.italic.bold="myColor">Hello!</div> <!-- 緑色で斜体で太字 -->
  <div v-text-color.underline.italic="myColor">Hello!</div> <!-- 緑色で下線付き斜体 -->
</div>

const app = Vue.createApp({
  data() {
    return {
      myColor: 'lightgreen',
    }
  }
}).directive('mo-color', {
  mounted(el, binding) {
    //ディレクティブが適用される要素にイベントリスナーを登録
    el.addEventListener('mouseenter', (e) => {
      el.style.backgroundColor = binding.value;
      //または e.currentTarget.style.backgroundColor = binding.value;
    });
    el.addEventListener('mouseleave', (e) => {
      el.style.backgroundColor = null;
      //または e.currentTarget.style.backgroundColor = null;
    });
  }
});
app.mount('#app');

<div id="app">
  <div v-mo-color="myColor">Hello!</div>
</div>

<div style="margin-top:50px; height: 2000px;">
  <div id="app">
    <div v-log-scroll>window.scrollY</div>
  </div>
</div>

const app = Vue.createApp({})
.directive('log-scroll', {
  mounted(el) {
    window.addEventListener('scroll', () => {
      el.style.position = 'fixed';
      el.textContent = 'window.scrollY : ' + window.scrollY;
      console.log(window.scrollY);
    })
  }
});
app.mount('#app');

const app = Vue.createApp({
  methods: {
    //属性値に指定するメソッド
    alertHello() {
      alert('hello');
    },
    logHello() {
      console.log('hello');
    }
  }
}).directive('hello', {
  mounted(el, binding) {
    //引数に mouseenter が指定されていれば mouseenter イベントを登録
    if (binding.arg === 'mouseenter') {
      el.addEventListener("mouseenter", () => {
        //属性値に指定されているメソッドを実行
        binding.value();
      });
    //引数に dblclick が指定されていれば dblclick イベントを登録
    }else if (binding.arg === 'dblclick') {
      el.addEventListener("dblclick", () => {
        binding.value();
      });
    //引数が指定されていない（上記のいずれでもない）場合は click イベントを登録
    }else{
      el.addEventListener("click", () => {
        binding.value();
      });
    }
  }
});
app.mount('#app');

<div id="app">
  <div v-hello:mouseenter="logHello">Mouse Enter</div><!--マウスオーバーでログ出力-->
  <div v-hello:dblclick="alertHello">Double Click</div><!--ダブルクリックでアラート-->
  <div v-hello="alertHello">Click</div><!--クリックでアラート-->
</div>

const app = Vue.createApp({
  methods: {
    alertHello(bye) {
      //引数が true であれば
      if(bye) {
        alert('hello and goodbye');
      }else{
        alert('hello');
      }
    },
    logHello(bye) {
      if(bye) {
        console.log('hello and goodbye');
      }else{
        console.log('hello');
      }
    }
  }
}).directive('hello', {
  mounted(el, binding) {
    if (binding.arg === 'mouseenter') {
      el.addEventListener("mouseenter", () => {
        //修飾子 bye が指定されていれば引数に true を指定
        binding.modifiers.bye ? binding.value(true) : binding.value();
      });
    }else if (binding.arg === 'dblclick') {
      el.addEventListener("dblclick", () => {
        binding.modifiers.bye ? binding.value(true) : binding.value();
      });
    }else{
      el.addEventListener("click", () => {
        binding.modifiers.bye ? binding.value(true) : binding.value();
      });
    }
  }
});
app.mount('#app');

<div id="app">
  <!--ダブルクリックで「hello」とアラート表示-->
  <div v-hello:dblclick="alertHello">Double Click</div>
  <!--クリックで「hello and goodbye」とコンソールに出力-->
  <div v-hello.bye="logHello">Click</div>
</div>

//ミックスイン
const myMixin = {
  //data オプション（オブジェクトを返す関数）
  data() {
    return {
      message: 'hello',
      foo: 'Foo'
    }
  }
}

//ミックスインを使用するコンポーネント
const app = Vue.createApp({
  mixins: [myMixin],
  //data オプション（オブジェクトを返す関数）
  data() {
    return {
      //data オプション（オブジェクトを返す関数）
      message: 'goodbye',
      bar: 'Bar'
    }
  },
  created() {
    //オブジェクトがマージされ、同名のプロパティはコンポーネントのプロパティが優先される
    console.log(this.$data) // => { message: "goodbye", foo: "Foo", bar: "Bar" }
  }
})
app.mount('#app');

//ミックスイン
const myMixin = {
  methods: {
    foo() {
      console.log('foo')
    },
    conflicting() {
      console.log('from mixin')
    }
  }
}

//ミックスインを使用するコンポーネント
const app = Vue.createApp({
  mixins: [myMixin],
  methods: {
    bar() {
      console.log('bar')
    },
    //同名のメソッド
    conflicting() {
      console.log('from component')
    }
  }
})
//コンポーネントのインスタンスを変数 vm に代入
const vm = app.mount('#app');

vm.foo() // => "foo"
vm.bar() // => "bar"
//同名のメソッド（コンポーネントオプションが優先される）
vm.conflicting() // => "from component"

//ミックスイン
const myMixin = {
  created() {
    console.log('mixin hook called')
  }
}

//ミックスインを使用するコンポーネント
const app = Vue.createApp({
  mixins: [myMixin],
  //同名のライフサイクルフック
  created() {
    console.log('component hook called')
  }
})
app.mount('#app');

//以下が出力される
//mixin hook called
//component hook called

//ミックスイン
const myMixin = {
  //カスタムオプション
  myOption: 'Mixin'
}

//ミックスインを使用するコンポーネント
const app = Vue.createApp({
  mixins: [myMixin],
  //同名のカスタムオプション
  myOption: 'Component'
})
const vm = app.mount('#app');

console.log(vm.$options.myOption);
//Component

app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
  // マージされた値を返す
}

//ミックスイン
const myMixin = {
  //カスタムオプション
  myOption: 'Mixin'
};

//ミックスインを使用するコンポーネント
const app = Vue.createApp({})
.component('my-compo', {
  //重複したカスタムオプション
  myOption: 'Component',
  template: `<div>{{ $options.myOption }} </div>`,
  mixins: [myMixin],
  created() {
    console.log('created : ' + this.$options.myOption); // => created : Component
  }
});

//マージルールを定義（マウントする前）
app.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  console.log('toVal（マージ先の値）: ' + toVal);
  console.log('fromVal（マージ元の値）: ' + fromVal);
  return fromVal || toVal;
}

app.mount('#app');

app.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  //toVal が存在する場合には常に toVal を返す
  return toVal || fromVal
}

//ミックスイン
const myMixin = {
  //カスタムオプション
  myOption: ['foo', 'bar']
};

//ミックスインを使用するコンポーネント
const app = Vue.createApp({})
.component('my-compo', {
  //重複したカスタムオプション
  myOption: ['baz'],
  template: `<div>{{ $options.myOption }} </div>`,
  mixins: [myMixin],
  created() {
    console.log(this.$options.myOption); // =>(3) ['baz', 'foo', 'bar']
  }
});

//マージルールを定義（引数 toVal と fromVal が undefined の場合の既定値を指定）
app.config.optionMergeStrategies.myOption = (toVal=[], fromVal=[]) => {
  return fromVal.concat(toVal)
}

app.mount('#app');

<div id="app">
  <my-compo></my-compo>
</div>

<div id="app" data-v-app="">
  <div>["baz","foo","bar"]</div>
</div>

<div id="app" data-v-app="">
  <div>["baz","foo","bar", null]</div>
</div>

const app = Vue.createApp({
  myOption: 'hello!'
});

// myOption オプションが存在すれば、その値をコンソールに出力するグローバルミックスイン
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption); //hello!
    }
  }
});

app.mount('#app');

const app = Vue.createApp({
  myOption: 'hello!'
})

// `myOption` カスタムオプションにハンドラを注入する
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
});

// myOption を子コンポーネントにも追加
app.component('my-compo', {
  myOption: 'hello from child component!',
  template: `<div>{{ this.$options.myOption }}</div>`
})

app.mount('#app');

//それぞれのコンポーネントでログが出力される
//hello!
//hello from child component!

const app = Vue.createApp({})
.mixin({
  created() {
    //data オブジェクトに title プロパティが存在すれば
    if(this.$data.title) {
      //data の title プロパティを document.title（title 要素の値）に設定
      document.title = this.$data.title;
      // または document.querySelector('title').textContent = this.$data.title;
    }
  }
});

app.component('my-compo', {
  template: `<div>My Compo</div>`,
  data() {
    return {
      //title プロパティが存在するので、この値が title 要素に反映される
      title: 'Global Mixin!'
    }
  }
})

app.mount('#app');

<title>Global Mixin!</title>

<!-- Vue の読み込み -->
<script src="//unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Vue I18n（バージョン 9 の最新版）の読み込み -->
<script src="https://unpkg.com/vue-i18n@9"></script>

// 1. 翻訳情報（translated locale messages）を用意
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 2. VueI18n.createI18n() にオプションを指定して i18n インスタンスを生成
const i18n = VueI18n.createI18n({
  locale: 'ja', // アプリで使用するロケールを指定
  fallbackLocale: 'en', // locale で指定した言語の情報（翻訳）がない場合のフォールバックを指定
  messages, // 翻訳情報を指定（messages: messages の省略形）
  // その他のオプション
});

// 3. Vue のインスタンスを生成
const app = Vue.createApp({
  // 必要なオプションを設定
});

// 4. 生成した i18n インスタンスを use() に渡して Vue I18n をインストール（有効化）
app.use(i18n);

// 5. アプリをマウント
app.mount("#app");

<div id="app">
  <p>{{ $t("message.hello") }}</p>
  <!-- $t() メソッドで現在のロケール（locale）の翻訳を取得 -->
</div>

<div id="app" data-v-app="">
  <p>こんにちは、世界</p>
</div>

export const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

<script type="module">
  //翻訳情報 messages をインポート
  import { messages } from './messages.js';

  const i18n = VueI18n.createI18n({
    locale: 'ja',
    fallbackLocale: 'en',
    messages  // messages: messages の省略形
  });

  const app = Vue.createApp({});
  app.use(i18n);
  app.mount("#app");
</script>

const MyPlugin = {
  install() {
    console.log('Hello from MyPlugin!');
  },
};

const MyPlugin = () => {
  console.log('Hello from MyPlugin!');
};

const MyPlugin = {
  install() {
    console.log('Hello from MyPlugin!');
  },
};

//アプリケーションを生成
const app = Vue.createApp({});

//use() メソッドでアプリケーションにプラグインを追加
app.use(MyPlugin);

<!-- Vue の読み込み -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- MyPlugin.js の読み込み -->
<script src="plugins/MyPlugin.js"></script>
<script>
  const app = Vue.createApp({});
  //プラグイン MyPlugin をアプリケーションに追加
  app.use(MyPlugin);
</script>

export default {
  install() {
    console.log('Hello from MyPlugin!');
  },
}

<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.2/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<script type="module">
  import { createApp } from 'vue';
  import MyPlugin from './plugins/MyPlugin.js';
  const app = createApp({});
  app.use(MyPlugin);
</script>